/* Isolated local Aanpak, Over ons and Contact. No homepage or global typography changes. */ .wab-studio-pages{background:#101117}.studio-pages{--sp-ink:#f5f5f2;--sp-muted:#c7cbd0;background:#101117;color:var(--sp-ink);}.studio-pages :is(h1,h2,h3){margin:0;color:inherit;overflow-wrap:normal}.studio-pages p{color:var(--sp-muted);margin:0 0 22px;max-width:100%}.studio-pages h1{max-width:100%}.studio-pages h2{}.studio-pages h3{margin-bottom:16px}.studio-pages section{scroll-margin-top:125px}.studio-pages .sp-hero{padding:190px 0 90px;background:#101117}.studio-pages .sp-hero-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:60px;margin-top:42px}.studio-pages .sp-hero-bottom>p{max-width:100%;margin:0;}.studio-pages a.sp-link{display:inline-flex;align-items:center;gap:18px;color:inherit!important;text-decoration:none!important;padding-block:12px;max-width:100%}.studio-pages .sp-link span{transition:transform .2s}.studio-pages .sp-link:hover span{transform:translate(3px,-3px)}.studio-pages a.sp-link:hover{color:#ADBCFF!important;text-decoration:none!important}.studio-pages .sp-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:90px}.studio-pages .sp-process{padding:80px 0 100px;background:#13131c}.studio-pages .sp-steps{list-style:none;padding:0;margin:0}.studio-pages .sp-steps li{display:flex;gap:25px;padding:0 0 36px}.studio-pages .sp-steps li:last-child{padding-bottom:0}.studio-pages .sp-step-number{color:#ADBCFF;min-width:24px;padding-top:2px}.studio-pages .sp-steps p{margin:0}.studio-pages .sp-collaboration{padding:105px 0;background:#21212d}.studio-pages .sp-collab-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:85px;margin-top:58px}.studio-pages .sp-collab-grid article:last-child{padding-top:42px}.studio-pages .sp-collab-grid p{margin:0}.studio-pages .sp-ownership,.studio-pages .sp-about-work{padding:100px 0;background:#13131c}.studio-pages .sp-maker{padding:100px 0;background:#21212d}.studio-pages .sp-maker-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:110px;align-items:center}.studio-pages .sp-maker figure{margin:0;max-width:100%}.studio-pages .sp-maker img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:14px}.studio-pages figcaption{color:#c7cbd0;margin-top:16px}.studio-pages .sp-maker h2{margin-bottom:30px}.studio-pages .sp-maker h3{margin-top:35px}.studio-pages .sp-history{padding:100px 0;background:#13131c}.studio-pages .sp-practical{background:#f5f5f2;color:#101117;padding:0 0 65px}.studio-pages .sp-practical p{color:#3d4650}.studio-pages .sp-practical-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:100px;padding-top:15px}.studio-pages .sp-practical h2{margin-bottom:23px}.studio-pages .sp-details{display:flex;justify-content:space-between;gap:25px;padding-top:60px}.studio-pages .sp-details p,.studio-pages .sp-details a{color:#48515b}.studio-pages .sp-details div{display:flex;gap:25px}.wab-studio-pages .footer-main,.wab-studio-pages .footer-divider{display:none} @media(max-width:900px){.studio-pages .sp-split{gap:40px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.studio-pages .sp-maker-grid{gap:50px}.studio-pages .sp-hero-bottom{gap:30px}.studio-pages .sp-hero-bottom>p{}.studio-pages .sp-practical-grid{gap:45px}} @media(max-width:650px){.studio-pages .sp-hero{padding:145px 0 60px}.studio-pages h1{}.studio-pages h2{}.studio-pages h3{}.studio-pages p{}.studio-pages .sp-hero-bottom{display:block;margin-top:30px}.studio-pages .sp-hero-bottom>p{}.studio-pages .sp-hero-bottom>.sp-link{margin-top:22px}.studio-pages :is(.sp-split,.sp-maker-grid,.sp-collab-grid,.sp-practical-grid){grid-template-columns:1fr;gap:34px}.studio-pages :is(.sp-process,.sp-collaboration,.sp-ownership,.sp-about-work,.sp-maker,.sp-history){padding-block:60px}.studio-pages .sp-steps p{}.studio-pages .sp-steps li{gap:18px;padding-bottom:30px}.studio-pages .sp-collab-grid{margin-top:38px}.studio-pages .sp-collab-grid article:last-child{padding-top:0}.studio-pages .sp-maker figure{max-width:100%}.studio-pages .sp-maker h2{margin-bottom:24px}.studio-pages .sp-practical{padding-bottom:45px}.studio-pages .sp-details{display:block;padding-top:40px}.studio-pages .sp-details div{flex-wrap:wrap;gap:12px 25px}.studio-pages section{scroll-margin-top:105px}} @media(prefers-reduced-motion:reduce){.studio-pages *{scroll-behavior:auto!important;transition:none!important}} .studio-pages .sp-work-photo{margin:0 auto;padding-bottom:80px;background:#101117}.studio-pages .sp-work-photo img{display:block;width:100%;height:auto;max-height:580px;object-fit:cover;border-radius:0}.studio-pages .sp-work-photo figcaption{margin-top:14px}.studio-pages .sp-work-photo--history{padding-top:70px;background:#21212d}.studio-pages--about .sp-hero h1{max-width:100%}.studio-pages--contact .sp-hero h1{max-width:100%}@media(max-width:650px){.studio-pages .sp-work-photo{padding-bottom:45px}.studio-pages .sp-work-photo img{min-height:220px;object-fit:cover}.studio-pages .sp-work-photo--history{padding-top:45px}} .studio-pages .sp-collective{padding:90px 0;background:#13131c}.studio-pages .sp-expertise{list-style:none;margin:35px 0;padding:0}.studio-pages .sp-expertise li{margin-bottom:28px}.studio-pages .sp-expertise strong{display:block;color:#f5f5f2;margin-bottom:5px}.studio-pages .sp-expertise span{display:block;color:#c7cbd0}.studio-pages .sp-maker .sp-work-photo--history{padding-bottom:0}@media(max-width:650px){.studio-pages .sp-collective{padding-block:60px}} .studio-pages .sp-process-intro{margin-top:28px}.studio-pages .sp-hero-photo{margin:48px 0 0}.studio-pages .sp-hero-photo img{display:block;width:100%;height:340px;object-fit:cover;object-position:center 48%}.studio-pages--approach .sp-collaboration{padding-block:75px}.studio-pages--approach .sp-collab-grid{margin-top:35px}.studio-pages--approach .sp-collab-grid article:last-child{padding-top:0}@media(max-width:650px){.studio-pages .sp-hero-photo{margin-top:30px}.studio-pages .sp-hero-photo img{height:200px}.studio-pages--approach .sp-collaboration{padding-block:55px}} .studio-pages .sp-values article+article{margin-top:35px}.studio-pages .sp-values article p{margin-bottom:0} /* Small-screen audit: keep the maker column within its grid track; leave room for native select text. */ .studio-pages .sp-maker-grid>*{min-width:0;max-width:100%}.studio-pages .sp-maker figure{width:100%}.studio-pages .sp-practical,.studio-pages .sp-practical:before,.studio-pages .sp-practical:after{border:0!important;box-shadow:none!important} @media(max-width:650px){.studio-pages .sp-maker h2{overflow-wrap:anywhere}.studio-pages .sp-maker figure{max-width:100%}} .studio-pages a.sp-link:focus,.studio-pages a.sp-link:focus-visible{text-decoration:none!important}.studio-pages .sp-chevron{width:18px;height:18px;flex:0 0 18px;display:block;transition:transform .18s ease}.studio-pages a.sp-link:hover .sp-chevron{transform:translateX(2px)}.studio-pages a.sp-link:hover .sp-chevron--down{transform:translateY(2px)}.studio-pages .sp-practical a.sp-link:hover{color:#0056dc!important} /* Ben: no hero scroll actions; all paired content columns share the width. */ .studio-pages .sp-hero-bottom{display:block}.studio-pages .sp-hero-bottom>p{max-width:100%} /* New warm-paper baseline after rejection of the dark Aanpak version. */ .studio-pages--approach,.studio-pages--about{--sp-ink:#101117;--sp-muted:#414950;background:#f5f5f2;color:var(--sp-ink)} .studio-pages--approach .sp-hero,.studio-pages--about :is(.sp-hero,.sp-about-work,.sp-collective,.sp-history){background:#f5f5f2} .studio-pages--about .sp-maker{background:#e6e6e2} .studio-pages--about .sp-expertise strong{color:#101117}.studio-pages--about .sp-expertise span,.studio-pages--about figcaption,.studio-pages--approach figcaption{color:#535c64} .studio-pages--about .sp-about-work{padding-bottom:40px}.studio-pages--about .sp-collective{padding-top:40px} .studio-pages .sp-intro-pair,.studio-pages .sp-even-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:80px;align-items:start} .studio-pages .sp-intro-pair h1{max-width:100%}.studio-pages .sp-intro-pair p{}.studio-pages--approach .sp-hero{padding-bottom:65px}.studio-pages--approach .sp-hero-photo{margin-top:55px}.studio-pages--approach .sp-hero-photo img{height:380px} .studio-pages .sp-route{padding:55px 0 80px;background:#f5f5f2}.studio-pages .sp-route> .container>h2{max-width:100%;margin-bottom:45px}.studio-pages .sp-route-list{list-style:none;padding:0;margin:0}.studio-pages .sp-route-list li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:80px;padding-block:26px}.studio-pages .sp-route-list h3{display:flex;gap:20px;align-items:baseline;max-width:100%}.studio-pages .sp-route-list h3>span{color:#5d6670;flex:0 0 24px}.studio-pages .sp-route-list p{margin-bottom:0} .studio-pages .sp-continuity{padding:75px 0;background:#e6e6e2}.studio-pages .sp-continuity h2{margin-bottom:28px}.studio-pages .sp-continuity p:last-child{margin-bottom:0} .studio-pages--approach a.sp-link:hover,.studio-pages--about a.sp-link:hover{color:#0056dc!important} @media(max-width:900px){.studio-pages .sp-intro-pair,.studio-pages .sp-even-pair,.studio-pages .sp-route-list li{gap:40px}} @media(max-width:650px){.studio-pages .sp-intro-pair,.studio-pages .sp-even-pair,.studio-pages .sp-route-list li{grid-template-columns:minmax(0,1fr);gap:22px}.studio-pages .sp-intro-pair h1{}.studio-pages .sp-intro-pair p{}.studio-pages--approach .sp-hero{padding-bottom:35px}.studio-pages--approach .sp-hero-photo{margin-top:30px}.studio-pages--approach .sp-hero-photo img{height:220px}.studio-pages .sp-route{padding:35px 0 50px}.studio-pages .sp-route>.container>h2{margin-bottom:20px}.studio-pages .sp-route-list li{padding-block:25px;gap:16px}.studio-pages .sp-route-list h3{gap:14px}.studio-pages .sp-continuity{padding-block:55px}.studio-pages .sp-even-pair{gap:40px}.studio-pages .sp-continuity h2{}.studio-pages--about .sp-about-work{padding-bottom:25px}.studio-pages--about .sp-collective{padding-top:25px}} /* Ben: full available section/explicit column width; no extra copy measure. */ .studio-pages :is(h1,h2,h3,h4,p,figcaption),.studio-pages .sp-maker figure{width:100%;max-width:100%} /* Existing studio photography and the original network visual, scoped to About. */ .studio-pages .sp-company-photos,.studio-pages .sp-memory-photos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px}.studio-pages .sp-company-photos{margin-top:50px}.studio-pages .sp-company-photos figure{margin:0;min-width:0}.studio-pages .sp-company-photos img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}.studio-pages .sp-network-visual{width:100%;max-width:100%;margin:45px 0 0;min-height:0}.studio-pages .sp-network-visual .orbit{width:100%;max-width:100%;margin:0}.studio-pages .sp-history>.container>h2{margin-bottom:45px}.studio-pages .sp-values article{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:80px}.studio-pages .sp-values article+article{margin-top:32px}.studio-pages .sp-values article h3{color:#101117}.studio-pages .sp-values>.sp-link{margin-top:25px}.studio-pages .sp-memories{margin-top:80px}.studio-pages .sp-memories blockquote{margin:0 0 45px;color:#101117}.studio-pages .sp-memory-photos{gap:80px;align-items:start}.studio-pages .sp-memory-photos figure{margin:0;min-width:0}.studio-pages .sp-memory-photos figure:last-child{margin-top:65px}.studio-pages .sp-memory-photos img{aspect-ratio:4/5;border-radius:0;object-fit:cover}.studio-pages .sp-memory-photos figcaption{margin-top:15px} @media(max-width:650px){.studio-pages .sp-company-photos,.studio-pages .sp-memory-photos,.studio-pages .sp-values article{grid-template-columns:minmax(0,1fr);gap:20px}.studio-pages .sp-company-photos{margin-top:30px}.studio-pages .sp-network-visual{margin-top:30px}.studio-pages .sp-history>.container>h2{margin-bottom:32px}.studio-pages .sp-values article h3{margin-bottom:0}.studio-pages .sp-memories{margin-top:50px}.studio-pages .sp-memory-photos{gap:35px}.studio-pages .sp-memory-photos figure:last-child{margin-top:0}.studio-pages .sp-memory-photos .js-float-media{transform:none!important}.studio-pages .sp-memories blockquote{margin-bottom:30px}} /* Narrow screens: long Dutch headings may wrap within their own column. */ .studio-pages .sp-even-pair>*,.studio-pages .sp-route-list li>*{min-width:0}.studio-pages .sp-continuity h2{overflow-wrap:anywhere} /* Ben: restore the actual live history composition and timeline, not travel photos. */ .studio-pages .sp-values--live{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:45px 60px}.studio-pages .sp-values--live article{display:block;margin:0}.studio-pages .sp-values--live article+article{margin-top:0}.studio-pages .sp-live-history{background:#13131c;color:#fff}.studio-pages .sp-live-history p{color:#e6e6e2}.studio-pages .sp-live-history h2,.studio-pages .sp-live-history h3{color:#fff}.studio-pages .about-milestone__inner{max-width:100%}.studio-pages .about-milestone__copy{max-width:100%}.studio-pages .about-milestone__crest img{height:auto}.studio-pages .about-timeline .panel{background-color:#21212d}.studio-pages .about-timeline__item p{max-width:100%}.studio-pages .about-timeline__year{}.studio-pages .sp-live-history .about-timeline__title{}.studio-pages .sp-live-history .about-timeline__subtitle{} @media(max-width:650px){.studio-pages .sp-values--live{grid-template-columns:minmax(0,1fr);gap:32px}.studio-pages .about-milestone__image{transform:none!important}.studio-pages .about-milestone h2{overflow-wrap:anywhere}.studio-pages .about-timeline__year{overflow-wrap:normal}} /* Restore the live dark history surface above generic .section background rules. */ body.wab-studio-pages .studio-pages section.sp-live-history{background:#13131c!important;color:#fff} body.wab-studio-pages .studio-pages section.sp-live-history .panel:not(.panel--media){background:#21212d!important} /* About: approved why opening only; the remaining page stays unchanged. */ .studio-pages--about .sp-hero--why{text-align:center;padding-top:185px;padding-bottom:90px}.studio-pages--about .sp-hero--why h1{overflow-wrap:anywhere}.studio-pages--about .sp-hero--why .wab-page-title-label{text-align:center}.studio-pages--about .sp-why-copy{width:100%;margin-top:55px;text-align:left}.studio-pages--about .sp-why-copy p{width:100%;max-width:100%;text-align:left;margin-bottom:23px}.studio-pages--about .sp-why-copy p:last-child{margin-bottom:0} @media(max-width:650px){.studio-pages--about .sp-hero--why{padding-top:145px;padding-bottom:60px}.studio-pages--about .sp-hero--why h1{}.studio-pages--about .sp-why-copy{margin-top:32px}.studio-pages--about .sp-why-copy p{}} /* About identity first; approved why opening follows in the existing studio section. */ .studio-pages--about .sp-hero--identity{text-align:left;padding-top:185px;padding-bottom:75px}.studio-pages--about .sp-hero--identity h1{overflow-wrap:anywhere}.studio-pages--about .sp-identity-copy{width:100%;margin-top:42px;text-align:left}.studio-pages--about .sp-identity-copy p{}.studio-pages--about .sp-about-work--why{padding-top:65px}.studio-pages--about .sp-about-work--why .sp-why-copy{margin-top:35px}.studio-pages--about .sp-about-work--why h2{width:100%;max-width:100%} @media(max-width:650px){.studio-pages--about .sp-hero--identity{padding-top:145px;padding-bottom:45px}.studio-pages--about .sp-hero--identity h1{}.studio-pages--about .sp-identity-copy{margin-top:30px}.studio-pages--about .sp-identity-copy p{}.studio-pages--about .sp-about-work--why{padding-top:40px}} /* Approved narrative About: one open founder/company history, no card overlays. */ .studio-pages--about .sp-origin{padding:85px 0;background:#e6e6e2}.studio-pages--about .sp-origin> .container>h2{margin-bottom:45px}.studio-pages--about .sp-origin-intro,.studio-pages--about .sp-open-timeline li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:60px;align-items:start}.studio-pages--about .sp-origin figure{margin:0;min-width:0}.studio-pages--about .sp-origin img{display:block;width:100%;height:auto;object-fit:cover}.studio-pages--about .sp-origin-intro>figure img{aspect-ratio:4/3;object-position:center 40%}.studio-pages--about .sp-open-timeline{list-style:none;margin:65px 0 0;padding:0 0 0 30px;border-left:1px solid #aaaab0}.studio-pages--about .sp-open-timeline li{position:relative;padding-bottom:55px}.studio-pages--about .sp-open-timeline li:last-child{padding-bottom:0}.studio-pages--about .sp-open-timeline li:before{content:"";position:absolute;width:9px;height:9px;background:#1552e2;border-radius:50%;left:-35px;top:18px}.studio-pages--about .sp-open-timeline__year{display:block;margin-bottom:22px}.studio-pages--about .sp-open-timeline h3{}.studio-pages--about .sp-open-timeline figure img{aspect-ratio:3/2}.studio-pages--about .sp-origin-mark img{width:150px;height:auto}.studio-pages--about .sp-origin-mark p{margin-top:20px}.studio-pages--about .sp-values--live h3{overflow-wrap:anywhere} @media(max-width:650px){.studio-pages--about .sp-origin{padding-block:60px}.studio-pages--about .sp-origin-intro,.studio-pages--about .sp-open-timeline li{grid-template-columns:minmax(0,1fr);gap:25px}.studio-pages--about .sp-open-timeline{margin-top:45px;padding-left:23px}.studio-pages--about .sp-open-timeline li{padding-bottom:40px}.studio-pages--about .sp-open-timeline li:before{left:-28px}.studio-pages--about .sp-origin> .container>h2{margin-bottom:30px}} /* About timeline: six real archive photographs, kept as a quiet polaroid sequence. */ .studio-pages--about .sp-open-timeline .sp-polaroid{padding:14px 14px 18px;background:#fff;box-shadow:0 8px 24px rgba(16,17,23,.07);transform:rotate(-1deg)}.studio-pages--about .sp-open-timeline li:nth-child(even) .sp-polaroid{transform:rotate(1deg)}.studio-pages--about .sp-open-timeline .sp-polaroid img{aspect-ratio:3/2;object-fit:cover}.studio-pages--about .sp-open-timeline li:first-child .sp-polaroid img{object-position:center 38%}.studio-pages--about .sp-polaroid figcaption{color:#414950;margin:15px 0 0}.studio-pages--about .sp-hero--identity h1{}.studio-pages--about .sp-open-timeline li{padding-bottom:70px} @media(max-width:650px){.studio-pages--about .sp-open-timeline .sp-polaroid,.studio-pages--about .sp-open-timeline li:nth-child(even) .sp-polaroid{transform:none;padding:10px 10px 15px}.studio-pages--about .sp-open-timeline li{padding-bottom:45px}.studio-pages--about .sp-hero--identity h1{}} @media(prefers-reduced-motion:reduce){.studio-pages--about .sp-open-timeline .sp-polaroid{transform:none!important}} /* Full-size archive opening blends into the actual history section, with no extra section. */ .studio-pages--about .sp-origin{padding-top:0}.studio-pages--about .sp-origin .sp-origin-wide{width:100%;position:relative;margin:0 0 55px}.studio-pages--about .sp-origin-wide img{display:block;width:100%;height:620px;object-fit:cover;object-position:center 20%}.studio-pages--about .sp-origin-wide:after{content:"";position:absolute;inset:50% 0 0;background:linear-gradient(transparent,#e6e6e2)}.studio-pages--about .sp-origin-intro{display:block}.studio-pages--about .sp-values--live{gap:45px 60px}.studio-pages--about .sp-values--live article h3{color:#1552e2}.studio-pages--about .sp-values--live article:last-child{grid-column:1/-1}.studio-pages--about .sp-history>.container>h2{margin-bottom:50px} @media(max-width:650px){.studio-pages--about .sp-origin-wide img{height:460px;object-position:43% center}.studio-pages--about .sp-origin .sp-origin-wide{margin-bottom:30px}.studio-pages--about .sp-values--live{gap:32px}.studio-pages--about .sp-values--live article h3{}} /* Timeline follows the existing Branding sticky-card pattern, without caption clutter. */ .studio-pages--about .sp-origin-wide{max-width:none!important;border:0!important;padding:0!important}.studio-pages--about .sp-origin-wide img{border:0!important;border-radius:0!important;max-width:none!important}.studio-pages--about .sp-open-timeline{padding-left:25px}.studio-pages--about .sp-open-timeline li{background:#e6e6e2;padding:30px 0 45px 20px;gap:50px}.studio-pages--about .sp-open-timeline li:before{left:-30px;top:48px;width:9px;height:9px;box-shadow:0 0 0 5px #e6e6e2}.studio-pages--about .sp-open-timeline .sp-polaroid{padding:12px;margin:0;background:#fff}.studio-pages--about .sp-values--live article:last-child{grid-column:auto}.studio-pages--about .sp-values--live article h3{color:#101117} @media(min-width:901px) and (min-height:720px) and (prefers-reduced-motion:no-preference){.studio-pages--about .sp-open-timeline li{position:sticky;top:calc(110px + var(--moment)*14px);z-index:calc(2 + var(--moment));box-shadow:0 -15px 24px rgba(16,17,23,.035)}.studio-pages--about .sp-origin{overflow:visible}.studio-pages--about .sp-open-timeline li:focus-within{z-index:15}} @media(max-width:650px){.studio-pages--about .sp-open-timeline{padding-left:20px}.studio-pages--about .sp-open-timeline li{position:relative;top:auto;padding:20px 0 35px 10px;gap:22px}.studio-pages--about .sp-open-timeline li:before{left:-25px;top:35px}.studio-pages--about .sp-values--live article:last-child{grid-column:auto}} /* Wide outpaint: keep the central people visible and remove the former edge gap. */ .studio-pages--about .sp-origin .sp-origin-wide{display:block;width:100%;max-width:100%!important;margin-inline:0;box-sizing:border-box;overflow:hidden}.studio-pages--about .sp-origin-wide img{height:auto;min-height:0;object-fit:contain;object-position:center;aspect-ratio:1672/941}.studio-pages--about .sp-origin-wide:after{inset:70% 0 0} @media(max-width:650px){.studio-pages--about .sp-origin-wide img{height:auto;aspect-ratio:1672/941;object-fit:contain;object-position:center}.studio-pages--about .sp-origin-wide:after{inset:78% 0 0}} /* Avoid a non-scrolling body overflow container swallowing the desktop sticky sequence. */ body.wab-studio-pages:has(.studio-pages--about){overflow-x:clip;overflow-y:visible} /* About top two sections only: a typographic opening and a contrasting editorial chapter. */ .studio-pages--about .sp-hero--identity{padding:190px 0 115px;background:#f5f5f2}.studio-pages--about .sp-hero--identity>.container{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:70px;align-items:end}.studio-pages--about .sp-hero--identity .sp-page-heading{min-width:0}.studio-pages--about .sp-hero--identity h1{overflow-wrap:normal}.studio-pages--about .sp-hero--identity .sp-identity-copy{margin:0;padding-bottom:4px}.studio-pages--about .sp-hero--identity .sp-identity-copy p{}.studio-pages--about .sp-hero--identity .sp-identity-copy p:last-child{margin:0}.studio-pages--about .sp-about-work--why{background:#fff;padding:95px 0 90px}.studio-pages--about .sp-about-work--why>.container>h2{}.studio-pages--about .sp-about-work--why .sp-why-copy{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px 70px;margin-top:45px}.studio-pages--about .sp-about-work--why .sp-why-copy p{margin:0;}.studio-pages--about .sp-about-work--why .sp-company-photo-composition{margin-top:65px} @media(max-width:900px){.studio-pages--about .sp-hero--identity>.container{gap:40px}.studio-pages--about .sp-hero--identity h1{}.studio-pages--about .sp-about-work--why .sp-why-copy{gap:25px 40px}} @media(max-width:650px){.studio-pages--about .sp-hero--identity{padding:145px 0 65px}.studio-pages--about .sp-hero--identity>.container{grid-template-columns:minmax(0,1fr);gap:35px}.studio-pages--about .sp-hero--identity h1{overflow-wrap:anywhere}.studio-pages--about .sp-hero--identity .sp-identity-copy p{}.studio-pages--about .sp-about-work--why{padding:60px 0}.studio-pages--about .sp-about-work--why>.container>h2{overflow-wrap:anywhere}.studio-pages--about .sp-about-work--why .sp-why-copy{grid-template-columns:minmax(0,1fr);gap:23px;margin-top:32px}.studio-pages--about .sp-about-work--why .sp-why-copy p{}.studio-pages--about .sp-about-work--why .sp-company-photo-composition{margin-top:40px}} /* Keep the long opening word whole inside the explicit half-column. */ .studio-pages--about .sp-hero--identity h1{overflow-wrap:normal} @media(max-width:900px){.studio-pages--about .sp-hero--identity>.container{grid-template-columns:minmax(0,1fr);gap:35px}.studio-pages--about .sp-hero--identity h1{}} @media(max-width:650px){.studio-pages--about .sp-hero--identity h1{overflow-wrap:normal}} /* Match the central CTA container breakpoint and inset; avoid nested legacy width insets. */ /* Refine only About network spacing, history and expectations. */ .studio-pages--about .sp-collective{padding-block:72px}.studio-pages--about .sp-collective>.sp-split{align-items:start;gap:70px}.studio-pages--about .sp-collective .sp-network-visual{margin-top:32px;display:flex;justify-content:center;align-items:flex-start}.studio-pages--about .sp-collective .sp-network-visual .orbit{--size:clamp(280px,30vw,400px);width:var(--size);height:var(--size);max-width:100%;flex:none}.studio-pages--about .sp-collective .sp-expertise{margin-block:30px}.studio-pages--about .sp-collective .sp-expertise li{margin-bottom:24px}.studio-pages--about .sp-collective .sp-expertise li:last-child{margin-bottom:0}.studio-pages--about .sp-collective .sp-split>div>p:last-child{margin-bottom:0} .studio-pages--about .sp-origin{background:#13131c;color:#fff;padding-bottom:90px}.studio-pages--about .sp-origin p{color:#d6d6db}.studio-pages--about .sp-origin-wide:after{background:linear-gradient(transparent,#13131c)}.studio-pages--about .sp-origin-wide.reveal{--reveal-delay:240ms!important;--reveal-duration:1.1s;transform:none}.studio-pages--about .sp-origin-wide.reveal.is-inview{transform:none}.studio-pages--about .sp-open-timeline{border:0;padding:0;margin-top:55px}.studio-pages--about .sp-open-timeline li{background:#21212d;border-radius:14px;padding:34px;gap:40px;box-shadow:0 -18px 45px rgba(0,0,0,.16);margin-bottom:26px}.studio-pages--about .sp-open-timeline li:before{display:none}.studio-pages--about .sp-open-timeline__year{color:#fff;margin-bottom:28px;}.studio-pages--about .sp-open-timeline .sp-polaroid{padding:8px;box-shadow:none;transform:none}.studio-pages--about .sp-open-timeline li:nth-child(even) .sp-polaroid{transform:none}.studio-pages--about .sp-open-timeline h3{color:#fff;}.studio-pages--about .sp-open-timeline li:last-child{padding-bottom:34px;margin-bottom:0} /* Gravity's open numbered hierarchy, adapted to WAB's own six expectations. */ .studio-pages--about .sp-values--live{counter-reset:expectation;gap:48px 70px}.studio-pages--about .sp-values--live article{counter-increment:expectation;position:relative;padding-left:48px}.studio-pages--about .sp-values--live article:before{content:counter(expectation,decimal-leading-zero);position:absolute;left:0;top:3px;color:#68717b}.studio-pages--about .sp-values--live article h3{margin-bottom:18px}.studio-pages--about .sp-values--live article p{}.studio-pages--about .sp-history{padding-block:90px} @media(max-width:900px){.studio-pages--about .sp-collective>.sp-split{gap:40px}.studio-pages--about .sp-open-timeline li{gap:28px;padding:28px}.studio-pages--about .sp-values--live{gap:38px 40px}} @media(max-width:650px){.studio-pages--about .sp-collective{padding-block:52px}.studio-pages--about .sp-collective>.sp-split{gap:34px}.studio-pages--about .sp-collective .sp-network-visual{margin-top:25px}.studio-pages--about .sp-collective .sp-network-visual .orbit{--size:min(calc(100vw - 36px),320px)}.studio-pages--about .sp-origin{padding-bottom:60px}.studio-pages--about .sp-open-timeline{margin-top:38px;padding:0}.studio-pages--about .sp-open-timeline li{position:relative;top:auto;padding:24px;gap:24px;border-radius:10px;margin-bottom:22px;box-shadow:none}.studio-pages--about .sp-open-timeline li:last-child{padding-bottom:24px}.studio-pages--about .sp-open-timeline__year{margin-bottom:20px}.studio-pages--about .sp-open-timeline h3{}.studio-pages--about .sp-values--live{gap:34px}.studio-pages--about .sp-values--live article{padding-left:36px}.studio-pages--about .sp-values--live article h3{}.studio-pages--about .sp-history{padding-block:60px}} @media(prefers-reduced-motion:reduce){.studio-pages--about .sp-origin-wide.reveal{opacity:1!important;transition:none!important;transform:none!important}.studio-pages--about .sp-open-timeline li{position:relative;top:auto}} /* Studio consumer integration18Oct: central Sanuk/Effra/UI govern type and buttons. */ .studio-pages--about .sp-origin-wide:after{inset:55% 0 0;background:linear-gradient(180deg,transparent 0%,#13131c 100%)} .studio-pages--about .sp-origin>.container>h2,.studio-pages--about .sp-origin-intro{width:66.6667%;margin-inline:auto;text-align:center} .studio-pages--about .sp-origin-intro{display:block} .studio-pages--about .sp-open-timeline{position:relative;border:0;padding:0;margin-top:65px;isolation:isolate} .studio-pages--about .sp-open-timeline:before{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:rgba(255,255,255,.22);z-index:-1} .studio-pages--about .sp-open-timeline li{position:relative;top:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:60px;align-items:center;background:#13131c;border-radius:0;box-shadow:none;padding:30px 0 70px;margin:0} .studio-pages--about .sp-open-timeline li:nth-child(even)>div{grid-column:2;grid-row:1} .studio-pages--about .sp-open-timeline li:nth-child(even)>figure{grid-column:1;grid-row:1} .studio-pages--about .sp-open-timeline__year{display:inline-flex;width:auto;padding:8px 18px;border:1px solid rgba(255,255,255,.3);border-radius:999px;margin-bottom:24px;font:700 18px/1.3 Effra,sans-serif;letter-spacing:0} .studio-pages--about .sp-open-timeline .sp-polaroid{padding:8px;background:#fff;border-radius:2px} @supports(animation-timeline:view()){ @media(prefers-reduced-motion:no-preference) and (min-width:901px){ .studio-pages--about .sp-open-timeline li{animation:sp-timeline-arrive linear both;animation-timeline:view();animation-range:entry 0% entry 65%} } } @keyframes sp-timeline-arrive{from{transform:translateY(24px)}to{transform:translateY(0)}} @media(max-width:900px){.studio-pages--about .sp-open-timeline li{gap:35px}} @media(max-width:650px){ .studio-pages--about .sp-origin>.container>h2,.studio-pages--about .sp-origin-intro{width:100%;text-align:left} .studio-pages--about .sp-open-timeline:before{left:0} .studio-pages--about .sp-open-timeline li{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;padding:20px 0 42px 20px;animation:none} .studio-pages--about .sp-open-timeline li:nth-child(even)>div,.studio-pages--about .sp-open-timeline li:nth-child(even)>figure{grid-column:auto;grid-row:auto} } @media(prefers-reduced-motion:reduce){.studio-pages--about .sp-open-timeline li{animation:none;transform:none}} /* Timeline visibility delta: leave the existing continuous line exposed between moments. */ .studio-pages--about .sp-open-timeline li{background:transparent} .studio-pages--about .sp-open-timeline li:before{content:"";display:block;position:absolute;left:calc(50% - 4px);top:38px;width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 0 0 5px #13131c} @media(max-width:650px){.studio-pages--about .sp-open-timeline li:before{left:-4px;top:30px}} /* Voice feedback12/20/21/22: Studio-only consumers; central UI remains authoritative. */ .studio-pages--about section.sp-origin{padding-top:0} .studio-pages--about .sp-origin .sp-origin-wide{margin-top:0;line-height:0} .studio-pages--about .sp-origin-award{width:125px;margin:0 auto 28px} .studio-pages--about .sp-origin-award img{width:100%;height:auto;object-fit:contain} .studio-pages--about .sp-origin>.container>h2{margin-bottom:30px} .studio-pages--about .sp-open-timeline:before{background:linear-gradient(transparent,rgba(255,255,255,.26) 38px,rgba(255,255,255,.26) calc(100% - 38px),transparent)} .studio-pages--about .sp-open-timeline li:before{top:46px} .studio-pages--about .sp-open-timeline li:after{content:"";position:absolute;top:50px;left:calc(50% + 5px);width:22px;height:1px;background:rgba(255,255,255,.3)} .studio-pages--about .sp-open-timeline li:nth-child(even):after{left:calc(50% - 27px)} .studio-pages--about .sp-open-timeline .sp-polaroid{justify-self:center;width:88%;transform:rotate(-1deg)} .studio-pages--about .sp-open-timeline li:nth-child(even) .sp-polaroid{transform:rotate(1deg)} .studio-pages--about .sp-open-timeline li:first-child .sp-polaroid{width:70%} .studio-pages--about .sp-open-timeline li:first-child .sp-polaroid img{aspect-ratio:3/4} .studio-pages--about .sp-open-timeline li:nth-child(3n) .sp-polaroid img{aspect-ratio:1} .studio-pages--about .sp-collective>.container>h2{margin-bottom:42px} .studio-pages--about .sp-collective .sp-split{align-items:center;gap:70px} .studio-pages--about .sp-collective .sp-network-visual{margin:0;justify-content:flex-start} .studio-pages--about .sp-collective .sp-expertise{margin:28px 0;text-align:left} .studio-pages--about .sp-collective .sp-expertise li{padding-block:16px;margin:0;border-top:1px solid rgba(16,17,23,.12)} .studio-pages--about .sp-history>.container>h2{margin-bottom:45px} .studio-pages--about .sp-values--live{gap:0 60px} .studio-pages--about .sp-values--live article{padding:28px 0 28px 48px;border-top:1px solid rgba(16,17,23,.15)} .studio-pages--about .sp-values--live article:before{top:31px;color:#0056dc} .studio-pages--about .sp-values--live article h3{margin-bottom:16px} .studio-pages .sp-continuity{padding-block:72px} .studio-pages .sp-continuity .sp-even-pair{gap:60px} .studio-pages .sp-continuity article{padding-top:26px;border-top:1px solid rgba(16,17,23,.18)} .studio-pages .sp-continuity h2{margin-bottom:24px} @media(max-width:650px){ .studio-pages--about .sp-origin-award{width:105px;margin-bottom:24px} .studio-pages--about .sp-collective>.container>h2{margin-bottom:30px} .studio-pages--about .sp-collective .sp-split{gap:30px} .studio-pages--about .sp-open-timeline li:before{top:36px} .studio-pages--about .sp-open-timeline li:after,.studio-pages--about .sp-open-timeline li:nth-child(even):after{top:40px;left:5px;width:12px} .studio-pages--about .sp-open-timeline .sp-polaroid,.studio-pages--about .sp-open-timeline li:first-child .sp-polaroid{width:100%;transform:none} .studio-pages--about .sp-open-timeline li:nth-child(even) .sp-polaroid{transform:none} .studio-pages--about .sp-values--live article{padding-left:36px} .studio-pages .sp-continuity{padding-block:52px} .studio-pages .sp-continuity .sp-even-pair{gap:30px} } @media(prefers-reduced-motion:reduce){.studio-pages--about .sp-open-timeline .sp-polaroid,.studio-pages--about .sp-open-timeline li:nth-child(even) .sp-polaroid{transform:none}} /* Review corrections: explicit box geometry and shared year/connector axis. */ .studio-pages--about .sp-origin .sp-origin-award{margin:0 auto 28px;width:125px} .studio-pages--about .sp-open-timeline li{align-items:start;--year-axis:50px} .studio-pages--about .sp-open-timeline li>div{min-width:0;display:flex;flex-direction:column;align-items:flex-start} .studio-pages--about .sp-open-timeline li:nth-child(odd)>div>.sp-open-timeline__year{align-self:flex-end} .studio-pages--about .sp-open-timeline li:before{top:calc(var(--year-axis) - 4px);left:calc(50% - 4px)} .studio-pages--about .sp-open-timeline li:after{top:var(--year-axis);left:calc(50% - 30px);width:26px} .studio-pages--about .sp-open-timeline li:nth-child(even):after{left:calc(50% + 5px);width:25px} .studio-pages--about .sp-values--live,.studio-pages--about .sp-values--live article{box-sizing:border-box;min-width:0} .studio-pages--about .sp-values--live article{width:auto;max-width:100%;display:block} .studio-pages--about .sp-values--live article>h3,.studio-pages--about .sp-values--live article>p{box-sizing:border-box;min-width:0} .studio-pages .sp-even-pair>article{box-sizing:border-box;min-width:0} @media(max-width:900px){.studio-pages--about .sp-open-timeline li:after{left:calc(50% - 17.5px);width:13.5px}.studio-pages--about .sp-open-timeline li:nth-child(even):after{left:calc(50% + 5px);width:12.5px}} @media(max-width:650px){ .studio-pages--about .sp-origin .sp-origin-award{width:105px;margin:0 auto 24px} .studio-pages--about .sp-open-timeline li{--year-axis:40px} .studio-pages--about .sp-open-timeline li:nth-child(odd)>div>.sp-open-timeline__year{align-self:flex-start} .studio-pages--about .sp-open-timeline li:before{left:-4px} .studio-pages--about .sp-open-timeline li:after,.studio-pages--about .sp-open-timeline li:nth-child(even):after{left:5px;width:15px} } /* Compact network expertise: existing FA icons, no rule/chevron decoration. */ .studio-pages--about .sp-collective .sp-expertise{list-style:none;padding:0;margin:26px 0} .studio-pages--about .sp-collective .sp-expertise li{display:grid;grid-template-columns:38px minmax(0,1fr);column-gap:14px;row-gap:4px;padding:0;margin:0 0 23px;border:0;align-items:start} .studio-pages--about .sp-collective .sp-expertise li:before,.studio-pages--about .sp-collective .sp-expertise li:after{content:none;display:none} .studio-pages--about .sp-collective .sp-expertise-icon{grid-column:1;grid-row:1/3;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#0056dc;color:#fff;font-size:16px} .studio-pages--about .sp-collective .sp-expertise li:nth-child(2) .sp-expertise-icon{background:#7054ad} .studio-pages--about .sp-collective .sp-expertise li:nth-child(3) .sp-expertise-icon{background:#e45039} .studio-pages--about .sp-collective .sp-expertise strong{grid-column:2;margin:3px 0 0} .studio-pages--about .sp-collective .sp-expertise span{grid-column:2} /* Lift the complete history opening into its photograph fade in normal flow. */ .studio-pages--about .sp-origin>.container{position:relative;z-index:1;margin-top:-150px} @media(max-width:650px){.studio-pages--about .sp-origin>.container{margin-top:-45px}} /* Six existing expectations, using the kit's quiet matte panel language. */ .studio-pages--about .sp-values--live{gap:24px;counter-reset:none} .studio-pages--about .sp-values--live article{display:grid;grid-template-columns:38px minmax(0,1fr);gap:10px 14px;align-content:start;box-sizing:border-box;padding:28px;border:0;border-radius:12px;background:#e9edf3;box-shadow:0 8px 28px rgb(16 17 23 / .045)} .studio-pages--about .sp-values--live article:nth-child(3n+2){background:#ece8f3} .studio-pages--about .sp-values--live article:nth-child(3n){background:#f2e9e5} .studio-pages--about .sp-values--live article:before,.studio-pages--about .sp-values--live article:after{content:none;display:none} .studio-pages--about .sp-values--live .sp-value-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#0056dc;color:#fff;font-size:16px} .studio-pages--about .sp-values--live article:nth-child(3n+2) .sp-value-icon{background:#7054ad} .studio-pages--about .sp-values--live article:nth-child(3n) .sp-value-icon{background:#e45039} .studio-pages--about .sp-values--live article h3{grid-column:2;align-self:center;margin:0;color:#101117} .studio-pages--about .sp-values--live article p{grid-column:1/-1;margin:4px 0 0} @media(max-width:650px){.studio-pages--about .sp-values--live{grid-template-columns:minmax(0,1fr);gap:18px}.studio-pages--about .sp-values--live article{padding:24px}} /* Quiet expectations: typography and one blue accent, informed by Gravity's open reasons layout. */ .studio-pages--about .sp-values--live{gap:34px 60px} .studio-pages--about .sp-values--live article,.studio-pages--about .sp-values--live article:nth-child(3n+2),.studio-pages--about .sp-values--live article:nth-child(3n){display:block;background:transparent;box-shadow:none;border:0;border-radius:0;padding:0 0 0 20px;border-left:2px solid #0056dc} .studio-pages--about .sp-values--live article h3{margin:0 0 12px} .studio-pages--about .sp-values--live article p{margin:0} @media(max-width:650px){.studio-pages--about .sp-values--live{gap:28px}.studio-pages--about .sp-values--live article{padding-left:18px}} /* Open expectations must not inherit legacy panel geometry. */ body.wab-local-ui-contract .studio-pages--about .sp-values--live article{box-shadow:none!important;border-radius:0;grid-template-columns:none;align-items:start} .studio-pages--about .sp-values--live article h3,.studio-pages--about .sp-values--live article p{grid-column:auto;grid-row:auto;width:100%;min-width:0} /* Existing project versus ongoing copy illustrated as finite path versus continuous rhythm. */ .studio-pages .sp-cooperation-visual{display:block;width:100%;height:auto;max-height:180px;color:#1552e2;margin:0 0 26px;font-family:Effra,sans-serif} .studio-pages .sp-continuity article{border-top:0;padding-top:0} @media(max-width:650px){.studio-pages .sp-cooperation-visual{max-height:130px;margin-bottom:20px}} .studio-pages--approach .sp-continuity{position:relative;isolation:isolate;background:#d1e1f9;overflow:hidden} .studio-pages--approach .sp-continuity:before{content:"";position:absolute;inset:0;background:url("hero-loop-black.svg") center/100% auto no-repeat;opacity:.045;pointer-events:none;z-index:-1} .studio-pages--approach .sp-continuity .sp-even-pair{gap:28px} .studio-pages--approach .sp-continuity article{padding:36px;box-sizing:border-box;background:#f5f5f2;border-radius:12px} @media(max-width:650px){.studio-pages--approach .sp-continuity article{padding:24px}} /* Aanpak-only restrained entry effects: static by default and on reduced motion. */ .studio-pages--approach :is(.sp-route,.wab-cycle,.sp-continuity,.local-personal-contact)>.container>h2,.studio-pages--approach .sp-page-heading{text-align:center} .studio-pages--approach .sp-intro-pair{align-items:center} .studio-pages--approach .wab-cycle__point{margin:0 0 18px;display:grid;place-items:center;flex:none} .studio-pages--approach .sp-continuity:before{background:#b3ccec;opacity:1;-webkit-mask:url("hero-loop-black.svg") center/100% auto no-repeat;mask:url("hero-loop-black.svg") center/100% auto no-repeat} .studio-pages--approach .sp-cooperation-visual{margin:0 0 26px;height:150px;max-height:none;object-fit:contain} @media(prefers-reduced-motion:no-preference){ .studio-pages--approach .wab-photo-section--plain.sp-motion-enter img{animation:sp-photo-settle 1.4s ease-out both} .studio-pages--approach .wab-cycle__diagram.sp-motion-enter .wab-cycle__ring circle{stroke-dasharray:2700;animation:sp-line-draw 1.4s ease-out both} .studio-pages--approach .wab-cycle__diagram.sp-motion-enter .wab-cycle__ring circle:nth-child(2){animation-delay:100ms}.studio-pages--approach .wab-cycle__diagram.sp-motion-enter .wab-cycle__ring circle:nth-child(3){animation-delay:200ms}.studio-pages--approach .wab-cycle__diagram.sp-motion-enter .wab-cycle__ring circle:nth-child(4){animation-delay:300ms} .studio-pages--approach .wab-cycle__step.sp-motion-enter,.studio-pages--approach .local-personal-contact.sp-motion-enter{animation:sp-quiet-entry .65s ease-out both;animation-delay:var(--sp-entry-delay,0ms)} .studio-pages--approach .wab-cycle__step.sp-motion-enter .wab-cycle__point{animation:sp-point-settle .8s ease-out both} .studio-pages--approach .sp-cooperation-visual.sp-motion-enter path{stroke-dasharray:1400;animation:sp-line-draw 1.4s ease-out both} .studio-pages--approach .sp-continuity.sp-motion-enter:before{animation:sp-curl-entry 1.3s ease-out both} } @keyframes sp-photo-settle{from{transform:scale(1.025)}to{transform:scale(1)}} @keyframes sp-quiet-entry{from{opacity:.35;translate:0 12px}to{opacity:1;translate:0 0}} @keyframes sp-line-draw{from{stroke-dashoffset:2700}to{stroke-dashoffset:0}} @keyframes sp-point-settle{from{background:#d1e1f9;color:#0056dc}to{background:#0056dc;color:#fff}} @keyframes sp-curl-entry{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}} @media(max-width:767px){.studio-pages--approach .sp-cooperation-visual{height:120px}.studio-pages--approach .sp-motion-enter{--sp-entry-delay:0ms!important}.studio-pages--approach .wab-photo-section--plain.sp-motion-enter img{animation:none}.studio-pages--approach .wab-cycle__step.sp-motion-enter{animation-duration:.4s}} @media(prefers-reduced-motion:reduce){.studio-pages--approach .sp-motion-enter,.studio-pages--approach .sp-motion-enter *,.studio-pages--approach .sp-motion-enter:before{animation:none!important;transition:none!important;opacity:1;translate:none;transform:none}} /* Latest Aanpak alignment and clear brand-blue collaboration surface. */ .studio-pages--approach .sp-page-heading{text-align:left} .studio-pages--approach .wab-cycle>.container>h2{text-align:left;margin-bottom:28px} .studio-pages--approach .sp-continuity{background:#0056dc} .studio-pages--approach .sp-continuity:before{background:#4386e4} .studio-pages--approach .sp-continuity article{background:#fff;color:#101117} .studio-pages--approach .sp-continuity article p{color:#414950} /* About expectations: a fixed blue check column replaces the former blue rules. */ body.wab-local-ui-contract .studio-pages--about .sp-values--live article{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:14px;row-gap:12px;border:0;padding:0;align-content:start} .studio-pages--about .sp-values--live .sp-value-check{grid-column:1;grid-row:1;color:#0056dc;font-size:18px;line-height:1.4;margin-top:3px;text-align:center} .studio-pages--about .sp-values--live article>h3{grid-column:2;grid-row:1;margin:0} .studio-pages--about .sp-values--live article>p{grid-column:2;grid-row:2;margin:0} /* Contact group outer corners match the existing 14px meeting panel, without clipping rings. */ body.wab-local-ui-contract .studio-pages--contact .sp-practical-grid--legacy3{overflow:visible;border-radius:0} body.wab-local-ui-contract .studio-pages--contact .sp-practical-grid--legacy3>article:first-child{border-radius:14px 0 0 14px!important} body.wab-local-ui-contract .studio-pages--contact .sp-practical-grid--legacy3>article:last-child{border-radius:0 14px 14px 0!important} @media(max-width:900px){ body.wab-local-ui-contract .studio-pages--contact .sp-practical-grid--legacy3>article:first-child{border-radius:14px 14px 0 0!important} body.wab-local-ui-contract .studio-pages--contact .sp-practical-grid--legacy3>article:last-child{border-radius:0 0 14px 14px!important} } /* About network only: a dark, spacious scene around the real existing network. */ .studio-pages--about section.sp-collective--cinematic{position:relative;isolation:isolate;background:#101117;color:#fff;padding:100px 0 110px;overflow:hidden} .studio-pages--about .sp-collective--cinematic:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 28% 60%,#21212d 0,transparent 56%);z-index:-1;pointer-events:none} .studio-pages--about .sp-collective--cinematic:after{content:"";position:absolute;inset:0;z-index:-1;background:#1b1b24;-webkit-mask:url("hero-loop-black.svg") 110% 15%/75% auto no-repeat;mask:url("hero-loop-black.svg") 110% 15%/75% auto no-repeat;pointer-events:none} .studio-pages--about .sp-collective--cinematic>.container>h2{color:#fff;margin:0 0 70px;max-width:100%;text-wrap:balance} .studio-pages--about .sp-collective--cinematic .sp-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:75px;align-items:center} .studio-pages--about .sp-collective--cinematic .sp-network-visual{margin:0;justify-content:center;padding-block:35px;min-height:510px;align-items:center;position:relative} .studio-pages--about .sp-collective--cinematic .sp-network-visual .orbit{--size:clamp(360px,38vw,530px);width:var(--size);height:var(--size);max-width:100%;filter:drop-shadow(0 22px 32px #0007)} .studio-pages--about .sp-collective--cinematic p{color:#d3d3dc} .studio-pages--about .sp-collective--cinematic .sp-expertise{margin:32px 0} .studio-pages--about .sp-collective--cinematic .sp-expertise li{margin-bottom:26px;column-gap:16px} .studio-pages--about .sp-collective--cinematic .sp-expertise strong{color:#fff} .studio-pages--about .sp-collective--cinematic .sp-expertise span{color:#b8b8c5} .studio-pages--about .sp-collective--cinematic .sp-expertise-icon{background:#21212d;color:#adbcff;box-shadow:inset 0 0 0 1px #ffffff14} .studio-pages--about .sp-collective--cinematic .sp-expertise li:nth-child(2) .sp-expertise-icon,.studio-pages--about .sp-collective--cinematic .sp-expertise li:nth-child(3) .sp-expertise-icon{background:#21212d} @media(max-width:900px){.studio-pages--about .sp-collective--cinematic .sp-split{gap:35px}.studio-pages--about .sp-collective--cinematic .sp-network-visual{min-height:360px}.studio-pages--about .sp-collective--cinematic .sp-network-visual .orbit{--size:340px}} @media(max-width:650px){.studio-pages--about section.sp-collective--cinematic{padding:60px 0}.studio-pages--about .sp-collective--cinematic>.container>h2{margin-bottom:30px}.studio-pages--about .sp-collective--cinematic .sp-split{grid-template-columns:minmax(0,1fr);gap:28px}.studio-pages--about .sp-collective--cinematic .sp-network-visual{min-height:0;padding:15px 0}.studio-pages--about .sp-collective--cinematic .sp-network-visual .orbit{--size:min(calc(100vw - 36px),340px)}.studio-pages--about .sp-collective--cinematic:after{-webkit-mask-size:150%;mask-size:150%}} /* Network decoration: use the existing unmasked full path; only the section edge clips. */ .studio-pages--about .sp-collective--cinematic:after{inset:-18% -22%;background:#1b1b24;-webkit-mask-image:url("brand-lines/loop-a.svg");mask-image:url("brand-lines/loop-a.svg");-webkit-mask-position:center;mask-position:center;-webkit-mask-size:100% auto;mask-size:100% auto;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat} @media(max-width:650px){.studio-pages--about .sp-collective--cinematic:after{inset:-8% -70%;-webkit-mask-size:auto 100%;mask-size:auto 100%}} /* About hero only: authentic edge imagery around a clear central story. */ .studio-pages--about .sp-hero--cinematic{position:relative;isolation:isolate;overflow:hidden;background:#101117;color:#fff;min-height:780px;box-sizing:border-box;padding:200px 0 150px} .studio-pages--about .sp-hero--cinematic>.container{position:relative;z-index:2;display:block;text-align:center} .studio-pages--about .sp-hero--cinematic .sp-page-heading,.studio-pages--about .sp-hero--cinematic .sp-identity-copy{text-align:center} .studio-pages--about .sp-hero--cinematic h1{color:#fff} .studio-pages--about .sp-hero--cinematic .sp-identity-copy{margin-top:36px;padding:0;box-sizing:border-box} .studio-pages--about .sp-hero--cinematic .sp-identity-copy p{color:#d2d2dc} .sp-hero-scene{position:absolute;inset:0;z-index:0;pointer-events:none;transition:transform .5s ease-out;transform-style:preserve-3d} .sp-hero-scene:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,#101117bb 23%,#101117bb 77%,transparent);pointer-events:none} .studio-pages--about .sp-hero-bubble{position:absolute;margin:0;width:210px;aspect-ratio:4/3;border-radius:18px;overflow:hidden;box-shadow:0 18px 45px #0008;border:1px solid #ffffff12} .sp-hero-bubble img{display:block;width:100%;height:100%;object-fit:cover} .studio-pages--about .sp-hero-bubble--1{left:-45px;top:180px;transform:rotate(-9deg)} .studio-pages--about .sp-hero-bubble--2{right:-40px;top:145px;transform:rotate(8deg);width:225px} .studio-pages--about .sp-hero-bubble--3{left:-30px;bottom:85px;width:185px;aspect-ratio:1;border-radius:50%;transform:rotate(6deg)} .studio-pages--about .sp-hero-bubble--4{right:-35px;bottom:65px;width:195px;transform:rotate(-7deg)} @media(max-width:1000px){.studio-pages--about .sp-hero--cinematic{min-height:0;padding:175px 0 125px}.studio-pages--about .sp-hero-bubble{width:140px}.studio-pages--about .sp-hero-bubble--2{width:150px}.studio-pages--about .sp-hero-bubble--3,.studio-pages--about .sp-hero-bubble--4{width:135px}.studio-pages--about .sp-hero--cinematic .sp-identity-copy{padding-inline:0}} @media(max-width:650px){.studio-pages--about .sp-hero--cinematic{padding:165px 0 140px}.studio-pages--about .sp-hero--cinematic .sp-identity-copy{padding:0;text-align:left}.studio-pages--about .sp-hero-bubble--1{width:95px;left:-24px;top:92px}.studio-pages--about .sp-hero-bubble--2{width:100px;right:-25px;top:auto;bottom:25px}.studio-pages--about .sp-hero-bubble--3{width:85px;left:-20px;bottom:15px}.studio-pages--about .sp-hero-bubble--4{display:none}.sp-hero-scene:after{background:linear-gradient(transparent,#101117e8 21%,#101117e8 78%,transparent)}} @media(prefers-reduced-motion:reduce){.sp-hero-scene{transition:none;transform:none!important}} /* Explicit About hero measure exception; the next chapter shares the dark scene. */ .studio-pages--about .sp-hero--cinematic>.container{max-width:820px;width:100%;margin-inline:auto} .studio-pages--about .sp-hero--cinematic .sp-identity-copy{text-align:center} .studio-pages--about .sp-about-work--why{background:#101117;color:#fff;position:relative;isolation:isolate} .studio-pages--about .sp-about-work--why h2{color:#fff} .studio-pages--about .sp-about-work--why .sp-why-copy p{color:#d2d2dc} .sp-hero-accent{position:absolute;display:grid;place-items:center;box-sizing:border-box;box-shadow:0 10px 25px #0004} .sp-hero-accent--design{left:14%;top:125px;width:58px;height:58px;border-radius:16px;background:#fca5a5;color:#101117;font-size:23px;transform:rotate(-8deg)} .sp-hero-accent--digital{right:12%;bottom:175px;width:54px;height:54px;border-radius:50%;background:#adbcff;color:#101117;font-size:22px;transform:rotate(8deg)} .sp-hero-accent--memoji{left:9%;bottom:135px;width:78px;height:78px;border-radius:50%;background:#88c69e;overflow:hidden;transform:rotate(-5deg)} .sp-hero-accent--memoji img{width:100%;height:100%;object-fit:contain} @media(max-width:1000px){.sp-hero-accent--design{left:7%;top:115px}.sp-hero-accent--digital{right:5%;bottom:90px}.sp-hero-accent--memoji{left:5%;bottom:80px;width:62px;height:62px}} @media(max-width:650px){.studio-pages--about .sp-hero--cinematic .sp-identity-copy{text-align:center}.sp-hero-accent--design{width:38px;height:38px;left:auto;right:12%;top:105px;border-radius:11px;font-size:17px}.sp-hero-accent--digital{display:none}.sp-hero-accent--memoji{left:24%;bottom:32px;width:46px;height:46px}} /* Explicit Ben exception: only the About cinematic hero gets the 820px centered measure. */ body.wab-local-ui-contract .studio-pages--about .sp-hero--cinematic>.container{box-sizing:border-box;width:100%!important;max-width:820px!important;margin-inline:auto!important} /* Ben: decorative curls temporarily off; keep network content and lighting unchanged. */ .studio-pages--about .sp-collective--cinematic:after{display:none} .studio-pages--contact .sp-hero--contact .wab-page-title-label{text-align:center} .studio-pages--approach .sp-approach-collage{padding:10px 0 75px;background:#f5f5f2;overflow:hidden} .sp-approach-collage>.container{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:24px;align-items:center} .sp-approach-collage figure{margin:0;min-width:0;border:8px solid #fff;box-shadow:0 12px 35px #10111716;transform:rotate(-4deg)} .sp-approach-collage figure:nth-child(2){transform:rotate(2deg);position:relative;z-index:1} .sp-approach-collage figure:nth-child(3){transform:rotate(-3deg)} .sp-approach-collage img{display:block;width:100%;height:280px;object-fit:cover} .sp-approach-collage figure:nth-child(2) img{height:350px} @media(max-width:767px){.studio-pages--approach .sp-approach-collage{padding-bottom:45px}.sp-approach-collage>.container{grid-template-columns:1fr 1fr;gap:18px}.sp-approach-collage figure{border-width:5px}.sp-approach-collage figure:nth-child(2){grid-column:1/-1;grid-row:1}.sp-approach-collage img{height:160px}.sp-approach-collage figure:nth-child(2) img{height:220px}} @media(prefers-reduced-motion:reduce){.sp-approach-collage figure{transform:none!important}} /* Explicit contact-label alignment and approved two-top/one-overlap collage. */ body.wab-local-ui-contract.wab-local-ui-contract .studio-pages--contact .sp-hero--contact .wab-page-title-label{text-align:center!important} .studio-pages--approach .sp-approach-collage>.container{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 60px;align-items:start;padding-top:35px;padding-bottom:15px} .studio-pages--approach .sp-approach-collage figure:nth-child(1){grid-column:1;grid-row:1;width:86%;justify-self:start;transform:rotate(-4deg);margin-top:25px} .studio-pages--approach .sp-approach-collage figure:nth-child(2){grid-column:2;grid-row:1;width:86%;justify-self:end;transform:rotate(3deg);margin-top:0} .studio-pages--approach .sp-approach-collage figure:nth-child(3){grid-column:1/-1;grid-row:2;width:76%;justify-self:center;transform:rotate(-1deg);position:relative;z-index:2;margin-top:-65px} .studio-pages--approach .sp-approach-collage figure:nth-child(1) img,.studio-pages--approach .sp-approach-collage figure:nth-child(2) img{height:300px;object-position:center} .studio-pages--approach .sp-approach-collage figure:nth-child(3) img{height:auto;aspect-ratio:3/2;object-fit:cover;object-position:center} @media(max-width:767px){ .studio-pages--approach .sp-approach-collage>.container{gap:0 18px;padding-top:16px} .studio-pages--approach .sp-approach-collage figure:nth-child(1),.studio-pages--approach .sp-approach-collage figure:nth-child(2){width:100%;margin-top:12px;transform:rotate(-2deg)} .studio-pages--approach .sp-approach-collage figure:nth-child(2){margin-top:0;transform:rotate(2deg)} .studio-pages--approach .sp-approach-collage figure:nth-child(3){width:94%;margin-top:-20px;transform:none} .studio-pages--approach .sp-approach-collage figure:nth-child(1) img,.studio-pages--approach .sp-approach-collage figure:nth-child(2) img{height:145px} } @media(prefers-reduced-motion:reduce){.studio-pages--approach .sp-approach-collage figure{transform:none!important}} /* Collage flow correction: compact explicit media frames contribute their full height. */ .studio-pages--approach .sp-approach-collage{height:auto;min-height:0;max-height:none;padding-bottom:45px;overflow:visible} .studio-pages--approach .sp-approach-collage>.container{height:auto;min-height:0;grid-template-rows:auto auto;grid-auto-rows:max-content;padding-bottom:25px} .studio-pages--approach .sp-approach-collage figure{box-sizing:border-box;height:auto;max-height:none;overflow:hidden} .studio-pages--approach .sp-approach-collage figure:nth-child(1) img,.studio-pages--approach .sp-approach-collage figure:nth-child(2) img{height:210px} .studio-pages--approach .sp-approach-collage figure:nth-child(3){margin-top:-45px;width:70%;height:auto;align-self:start;background:#fff} .studio-pages--approach .sp-approach-collage figure:nth-child(3) img{height:350px;aspect-ratio:auto;object-fit:contain;object-position:center;background:#fff} @media(max-width:767px){.studio-pages--approach .sp-approach-collage{padding-bottom:30px}.studio-pages--approach .sp-approach-collage>.container{padding-bottom:10px}.studio-pages--approach .sp-approach-collage figure:nth-child(1) img,.studio-pages--approach .sp-approach-collage figure:nth-child(2) img{height:140px}.studio-pages--approach .sp-approach-collage figure:nth-child(3){width:94%;margin-top:-18px}.studio-pages--approach .sp-approach-collage figure:nth-child(3) img{height:210px}} /* Ben20Oct: a clean two-image approach grid; no polaroids or overlap. */ .studio-pages--approach .sp-approach-collage{padding:10px 0 60px;height:auto;overflow:visible} .studio-pages--approach .sp-approach-collage>.container{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;grid-template-rows:auto;align-items:stretch;height:auto;min-height:0;padding-top:0;padding-bottom:0} .studio-pages--approach .sp-approach-collage figure:nth-child(n){grid-column:auto;grid-row:auto;width:100%;height:auto;min-width:0;max-height:none;justify-self:stretch;align-self:stretch;margin:0;border:0;border-radius:0;box-shadow:none;transform:none;position:static;overflow:hidden;box-sizing:border-box} .studio-pages--approach .sp-approach-collage figure:nth-child(n) img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:center;transform:none} @media(max-width:767px){.studio-pages--approach .sp-approach-collage{padding-bottom:40px}.studio-pages--approach .sp-approach-collage>.container{grid-template-columns:minmax(0,1fr);gap:20px}} /* One-shot cycle orbit entry, reusing the existing approach observer only. */ @media(min-width:1001px) and (prefers-reduced-motion:no-preference){ .studio-pages--approach .wab-cycle__diagram{container-type:inline-size} .studio-pages--approach .wab-cycle__step.sp-motion-enter{animation:sp-cycle-brake 1.05s cubic-bezier(.12,.72,.2,1) both;animation-delay:var(--sp-entry-delay,0ms)} .studio-pages--approach .wab-cycle__step:nth-child(1){transform-origin:calc(50% + 18cqw) calc(50% + 28cqw)} .studio-pages--approach .wab-cycle__step:nth-child(2){transform-origin:calc(50% - 28cqw) calc(50% + 18cqw)} .studio-pages--approach .wab-cycle__step:nth-child(3){transform-origin:calc(50% - 18cqw) calc(50% - 28cqw)} .studio-pages--approach .wab-cycle__step:nth-child(4){transform-origin:calc(50% + 28cqw) calc(50% - 18cqw)} } @keyframes sp-cycle-brake{from{transform:translate(-50%,-50%) rotate(-9deg);opacity:.45}to{transform:translate(-50%,-50%) rotate(0);opacity:1}} body.wab-local-typography.wab-local-typography.wab-local-typography .studio-pages--approach .sp-continuity h2{font-size:clamp(24px,2.1vw,30px)!important;line-height:1.2!important} .studio-pages--about .sp-hero-bubble--1 img{object-position:50% 38%} .studio-pages--about .sp-hero-bubble--4 img{object-position:center 55%} /* About hero reuses the native homepage star pattern, confined here with a black bottom fade. */ .studio-pages--about .sp-hero--cinematic:before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background-image: radial-gradient(circle at 8% 22%, rgba(255, 255, 255, 0.62) 0 1px, transparent 2px), radial-gradient(circle at 18% 78%, rgba(255, 255, 255, 0.5) 0 1px, transparent 2px), radial-gradient(circle at 27% 36%, rgba(255, 255, 255, 0.46) 0 1px, transparent 2px), radial-gradient(circle at 39% 14%, rgba(255, 255, 255, 0.7) 0 1px, transparent 2px), radial-gradient(circle at 48% 68%, rgba(255, 255, 255, 0.44) 0 1px, transparent 2px), radial-gradient(circle at 58% 28%, rgba(255, 255, 255, 0.58) 0 1px, transparent 2px), radial-gradient(circle at 68% 82%, rgba(255, 255, 255, 0.42) 0 1px, transparent 2px), radial-gradient(circle at 78% 42%, rgba(255, 255, 255, 0.66) 0 1px, transparent 2px), radial-gradient(circle at 91% 18%, rgba(255, 255, 255, 0.5) 0 1px, transparent 2px), radial-gradient(circle at 94% 72%, rgba(255, 255, 255, 0.56) 0 1px, transparent 2px), radial-gradient(circle at 14% 48%, rgba(255, 255, 255, 0.98) 0 1px, rgba(255, 255, 255, 0.28) 2px, transparent 5px), radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.9) 0 1px, rgba(255, 255, 255, 0.18) 2px, transparent 6px), radial-gradient(circle at 53% 46%, rgba(255, 255, 255, 0.86) 0 1px, rgba(255, 255, 255, 0.18) 2px, transparent 6px), radial-gradient(circle at 73% 20%, rgba(255, 255, 255, 0.96) 0 1px, rgba(255, 255, 255, 0.22) 2px, transparent 6px), radial-gradient(circle at 86% 62%, rgba(255, 255, 255, 0.9) 0 1px, rgba(255, 255, 255, 0.18) 2px, transparent 6px);opacity:.34;filter:drop-shadow(0 0 10px #ffffff40)} .studio-pages--about .sp-hero--cinematic:after{content:"";position:absolute;inset:auto 0 0;height:180px;background:linear-gradient(transparent,#101117);pointer-events:none;z-index:1} .studio-pages--about .sp-hero-bubble--3 img{object-position:center 32%} /* Tablet-only safe zone: keep edge photographs above/below the text, not beside its lines. */ @media(min-width:651px) and (max-width:1000px){ .studio-pages--about .sp-hero--cinematic{min-height:720px;padding-bottom:195px} .studio-pages--about .sp-hero-bubble--1{width:105px;left:-48px;top:95px;bottom:auto} .studio-pages--about .sp-hero-bubble--2{width:110px;right:-60px;top:100px;bottom:auto} .studio-pages--about .sp-hero-bubble--3{width:110px;left:-25px;top:auto;bottom:25px} .studio-pages--about .sp-hero-bubble--4{width:110px;right:-25px;top:auto;bottom:20px} .studio-pages--about .sp-hero-accent--memoji{bottom:50px} .studio-pages--about .sp-hero-accent--digital{bottom:45px} } /* Latest Contact/Aanpak light surfaces; preserve the colored contact cards. */ body.wab-local-ui-contract.wab-local-ui-contract .studio-pages--approach .sp-hero--approach, body.wab-local-ui-contract.wab-local-ui-contract .studio-pages--contact .sp-hero--contact, body.wab-local-ui-contract.wab-local-ui-contract .studio-pages--contact .sp-practical--before-form{background:#fff!important;color:#101117!important} body.wab-local-ui-contract.wab-local-ui-contract .studio-pages--approach .sp-hero--approach h1, body.wab-local-ui-contract.wab-local-ui-contract .studio-pages--contact .sp-hero--contact h1{color:#101117!important} body.wab-local-ui-contract.wab-local-ui-contract .studio-pages--approach .sp-hero--approach p, body.wab-local-ui-contract.wab-local-ui-contract .studio-pages--contact .sp-hero--contact .sp-hero-bottom p{color:#48515b!important} body.wab-local-ui-contract.wab-local-ui-contract .studio-pages--approach .sp-hero--approach .wab-page-title-label, body.wab-local-ui-contract.wab-local-ui-contract .studio-pages--contact .sp-hero--contact .wab-page-title-label{color:#0056dc!important} body.wab-local-ui-contract.wab-local-ui-contract .studio-pages--contact .sp-meeting-panel{background:#101117;color:#fff} body.wab-local-ui-contract.wab-local-ui-contract .studio-pages--contact .sp-meeting-panel h3{color:#fff!important} body.wab-local-ui-contract.wab-local-ui-contract .studio-pages--contact .sp-meeting-panel p{color:#d4d4db!important} body.wab-local-ui-contract.wab-local-ui-contract.wab-local-ui-contract.wab-local-ui-contract .studio-pages--contact .sp-meeting-panel .button--dark{--wb-btn-bg:#fff;--wb-btn-fg:#101117;--wb-btn-border:#fff} /* Ben: the two collaboration headings use the house blue on white panels. */ body.wab-local-ui-contract .studio-pages--approach .sp-continuity .sp-even-pair>article>h2{color:#0056dc!important} /* Aanpak: one large discussion image and two compact work details. */ .studio-pages--approach .sp-approach-collage>.container{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);grid-template-rows:repeat(2,minmax(0,1fr));gap:22px;height:540px} .studio-pages--approach .sp-approach-collage figure:nth-child(1){grid-column:1;grid-row:1/3} .studio-pages--approach .sp-approach-collage figure:nth-child(2){grid-column:2;grid-row:1} .studio-pages--approach .sp-approach-collage figure:nth-child(3){grid-column:2;grid-row:2} .studio-pages--approach .sp-approach-collage figure:nth-child(n) img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover} @media(min-width:768px) and (max-width:1000px){.studio-pages--approach .sp-approach-collage>.container{height:430px;gap:18px}} @media(max-width:767px){.studio-pages--approach .sp-approach-collage>.container{height:auto;grid-template-columns:minmax(0,1fr);grid-template-rows:auto;gap:18px}.studio-pages--approach .sp-approach-collage figure:nth-child(n){grid-column:1;grid-row:auto}.studio-pages--approach .sp-approach-collage figure:nth-child(n) img{height:auto;aspect-ratio:4/3}} /* Aanpak edge-to-edge mosaic: the paper surface begins behind the photographs. */ .studio-pages--approach .sp-approach-collage{position:relative;isolation:isolate;background:#fff;padding:24px 0 80px;overflow:hidden} .studio-pages--approach .sp-approach-collage:before{content:"";position:absolute;inset:150px 0 0;background:#f5f5f2;z-index:-1;pointer-events:none} body.wab-local-ui-contract .studio-pages--approach .sp-approach-collage>.container{width:100%!important;max-width:none!important;padding:0!important;grid-template-columns:minmax(0,1.22fr) minmax(0,1fr);grid-template-rows:repeat(2,minmax(0,1fr));gap:26px 5vw;height:590px;align-items:stretch} .studio-pages--approach .sp-approach-collage figure:nth-child(1){margin-top:74px;margin-bottom:0} .studio-pages--approach .sp-approach-collage figure:nth-child(2){margin-top:0;margin-bottom:18px} .studio-pages--approach .sp-approach-collage figure:nth-child(3){margin-top:-18px;margin-bottom:44px} @media(min-width:768px) and (max-width:1000px){body.wab-local-ui-contract .studio-pages--approach .sp-approach-collage>.container{height:470px;gap:20px 4vw}.studio-pages--approach .sp-approach-collage:before{top:115px}.studio-pages--approach .sp-approach-collage figure:nth-child(1){margin-top:54px}} @media(max-width:767px){.studio-pages--approach .sp-approach-collage{padding:10px 0 40px}.studio-pages--approach .sp-approach-collage:before{top:90px}body.wab-local-ui-contract .studio-pages--approach .sp-approach-collage>.container{height:auto;grid-template-columns:minmax(0,1fr);grid-template-rows:auto;gap:20px}.studio-pages--approach .sp-approach-collage figure:nth-child(1){width:94%;margin:0;justify-self:start}.studio-pages--approach .sp-approach-collage figure:nth-child(2){width:92%;margin:0;justify-self:end}.studio-pages--approach .sp-approach-collage figure:nth-child(3){width:94%;margin:0;justify-self:start}.studio-pages--approach .sp-approach-collage figure:nth-child(n) img{aspect-ratio:3/2}} /* Actual content viewport may be narrower than 320px when the scrollbar occupies space. */ body.wab-local-ui-contract main.studio-pages--approach{min-width:0!important} /* Selected V3 office visualisations: preserve the landscape scene and hands. */ .studio-pages--about #wie-bedrijf-fotos .wab-photo-composition__image{aspect-ratio:1672/941} .studio-pages--about #wie-bedrijf-fotos [data-photo-layer="0"] img{object-position:50% 48%} .studio-pages--about #wie-bedrijf-fotos [data-photo-layer="1"] img{object-position:62% 45%} @media(max-width:767px){.studio-pages--about #wie-bedrijf-fotos [data-photo-layer="0"] img{object-position:35% 50%}.studio-pages--about #wie-bedrijf-fotos [data-photo-layer="1"] img{object-position:55% 42%}} /* Latest selected V3 nine-slot photography; deliberate portrait/landscape duo. */ .studio-pages--about .sp-hero-bubble--1{aspect-ratio:4/3;} .studio-pages--about .sp-hero-bubble--1 img{object-position:50% 48%} .studio-pages--about .sp-hero-bubble--2{aspect-ratio:4/3;} .studio-pages--about .sp-hero-bubble--2 img{object-position:64% 42%} .studio-pages--about .sp-hero-bubble--3{aspect-ratio:1/1;border-radius:50%;} .studio-pages--about .sp-hero-bubble--3 img{object-position:58% 42%} .studio-pages--about .sp-hero-bubble--4{aspect-ratio:4/3;} .studio-pages--about .sp-hero-bubble--4 img{object-position:50% 60%} .studio-pages--about #wie-bedrijf-fotos{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center} .studio-pages--about #wie-bedrijf-fotos [data-photo-layer="0"] .wab-photo-composition__image{aspect-ratio:4/5} .studio-pages--about #wie-bedrijf-fotos [data-photo-layer="1"] .wab-photo-composition__image{aspect-ratio:3/2} .studio-pages--about #wie-bedrijf-fotos [data-photo-layer="0"] img{object-position:28% 44%} .studio-pages--about #wie-bedrijf-fotos [data-photo-layer="1"] img{object-position:50% 45%} .studio-pages--approach .sp-approach-collage figure:nth-child(1) img{object-position:46% 46%} .studio-pages--approach .sp-approach-collage figure:nth-child(2) img{object-position:54% 50%} .studio-pages--approach .sp-approach-collage figure:nth-child(3) img{object-position:50% 58%} @media(max-width:767px){.studio-pages--about #wie-bedrijf-fotos{grid-template-columns:minmax(0,1fr)}.studio-pages--about #wie-bedrijf-fotos [data-photo-layer="0"] img{object-position:28% 44%}.studio-pages--about #wie-bedrijf-fotos [data-photo-layer="1"] img{object-position:50% 45%}} /* Six promises connected to one shared centre; connections remain behind the copy. */ .studio-pages--about .sp-values--hub{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) 140px minmax(0,1fr);grid-template-rows:repeat(3,auto);gap:24px 28px;align-items:stretch} .studio-pages--about .sp-values--hub>article{position:relative;z-index:2;display:block!important;padding:26px!important;margin:0!important;border:0!important;border-radius:14px;background:#f5f5f2;min-width:0;box-shadow:0 5px 18px #10111708;grid-column:1} .studio-pages--about .sp-values--hub>article:nth-of-type(1){grid-row:1}.studio-pages--about .sp-values--hub>article:nth-of-type(2){grid-row:2}.studio-pages--about .sp-values--hub>article:nth-of-type(3){grid-row:3} .studio-pages--about .sp-values--hub>article:nth-of-type(n+4){grid-column:3}.studio-pages--about .sp-values--hub>article:nth-of-type(4){grid-row:1}.studio-pages--about .sp-values--hub>article:nth-of-type(5){grid-row:2}.studio-pages--about .sp-values--hub>article:nth-of-type(6){grid-row:3} .studio-pages--about .sp-values--hub h3{padding:0!important;margin:0 0 12px!important;color:#101117!important}.studio-pages--about .sp-values--hub p{padding:0!important;margin:0!important} .sp-values-center{grid-column:2;grid-row:1/4;align-self:center;justify-self:center;display:grid;place-items:center;width:112px;height:112px;border-radius:50%;background:#e6e6e2;font-size:52px;z-index:3} .sp-values-connectors{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:1;pointer-events:none}.sp-values-connectors path{fill:none;stroke:#0056dc;stroke-opacity:.35;stroke-width:1.5;stroke-dasharray:3 6;stroke-linecap:round} @media(max-width:767px){.studio-pages--about .sp-values--hub{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;gap:22px;padding-inline:20px}.studio-pages--about .sp-values--hub>article:nth-of-type(n){grid-column:1;grid-row:auto;padding:22px!important}.sp-values-center{grid-column:1;grid-row:4;width:88px;height:88px;font-size:42px;margin:12px 0}.studio-pages--about .sp-values--hub>article:nth-of-type(1){grid-row:1}.studio-pages--about .sp-values--hub>article:nth-of-type(2){grid-row:2}.studio-pages--about .sp-values--hub>article:nth-of-type(3){grid-row:3}.studio-pages--about .sp-values--hub>article:nth-of-type(4){grid-row:5}.studio-pages--about .sp-values--hub>article:nth-of-type(5){grid-row:6}.studio-pages--about .sp-values--hub>article:nth-of-type(6){grid-row:7}} /* Motion is progressive: absent JS or reduced motion keeps all history readable. */ .studio-pages--about .sp-open-timeline.sp-history-motion:before{transform-origin:top;transform:scaleY(var(--history-progress,1))} .studio-pages--about .sp-open-timeline.sp-history-motion li{opacity:.45;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease} .studio-pages--about .sp-open-timeline.sp-history-motion li.is-history-visible{opacity:1;transform:none} .studio-pages--about .sp-open-timeline.sp-history-motion .sp-open-timeline__year{transition:color .5s ease} @media(max-width:767px){.studio-pages--about .sp-open-timeline.sp-history-motion li{transform:translateY(6px)}} @media(prefers-reduced-motion:reduce){.studio-pages--about .sp-open-timeline.sp-history-motion li{opacity:1;transform:none;transition:none}.studio-pages--about .sp-open-timeline.sp-history-motion:before{transform:none}} @media(min-width:768px) and (max-width:1000px){.studio-pages--approach .sp-approach-collage figure:nth-child(1) img{object-position:28% 46%}} /* Contact visit card: requested warm accent and secondary supporting copy. */ body.wab-local-ui-contract.wab-local-ui-contract .studio-pages--contact .sp-practical-card--address{background:#ff8561!important;color:#101117!important} body.wab-local-ui-contract.wab-local-ui-contract .studio-pages--contact .sp-practical-card--address :is(h2,p){color:#101117!important} body.wab-local-ui-contract.wab-local-ui-contract .studio-pages--contact .sp-practical-card--address .sp-practical-card__icon{background:#fff!important;color:#21212d!important} body.wab-local-ui-contract.wab-local-ui-contract .studio-pages--contact .sp-contact-support{font-size:16px!important;line-height:1.5!important} /* Explicitgood canonical206 selection: slot focus supersedes previous photo-specific crops. */ .studio-pages--about .sp-hero-bubble--1 img{object-position:50% 44%} .studio-pages--about .sp-hero-bubble--2 img{object-position:50% 44%} .studio-pages--about .sp-hero-bubble--3 img{object-position:50% 44%} .studio-pages--about .sp-hero-bubble--4 img{object-position:50% 44%} .studio-pages--about #wie-bedrijf-fotos [data-photo-layer="0"] img{object-position:43% 35%} .studio-pages--about #wie-bedrijf-fotos [data-photo-layer="1"] img{object-position:50% 43%} .studio-pages--approach .sp-approach-collage figure:nth-child(1) img{object-position:50% 44%} .studio-pages--approach .sp-approach-collage figure:nth-child(2) img{object-position:50% 44%} .studio-pages--approach .sp-approach-collage figure:nth-child(3) img{object-position:50% 44%} @media(max-width:767px){.studio-pages--about #wie-bedrijf-fotos [data-photo-layer="0"] img{object-position:43% 30%}.studio-pages--about #wie-bedrijf-fotos [data-photo-layer="1"] img{object-position:50% 42%}} /* Selected upright087 photo: retain the face within the existing landscape frame. */ .studio-pages--approach .sp-approach-collage figure:nth-child(3) img{object-position:50% 18%} /* Two distinct phone choices on small screens, unaffected desktop typography. */ body.wab-local-ui-contract.wab-local-ui-contract.wab-local-ui-contract .studio-pages--contact .sp-practical-card--phone p>a[href^="tel:"]{display:block!important;width:fit-content;margin-bottom:8px}body.wab-local-ui-contract .studio-pages--contact .sp-practical-card--phone p>br{display:none} /* Subtle photographic rhythm; reserved inset prevents rotation from making page overflow. */ .studio-pages--approach .sp-approach-collage figure:nth-child(1){transform:rotate(-1deg);transform-origin:50% 50%} .studio-pages--approach .sp-approach-collage figure:nth-child(2){transform:rotate(1.2deg)} .studio-pages--approach .sp-approach-collage figure:nth-child(3){transform:rotate(-.8deg)} body.wab-local-ui-contract.wab-local-ui-contract .studio-pages--contact .sp-contact-support{opacity:.4} body.wab-local-ui-contract.wab-local-ui-contract .studio-pages--contact .sp-practical--before-form{position:relative;isolation:isolate;background:transparent!important} .studio-pages--contact .sp-practical--before-form:before{content:"";position:absolute;inset:var(--sp-contact-surface-start,190px) 0 0;background:#f5f5f2;z-index:-1;pointer-events:none} @media(max-width:767px){.studio-pages--approach .sp-approach-collage figure:nth-child(1){transform:rotate(-.6deg)}.studio-pages--approach .sp-approach-collage figure:nth-child(2){transform:rotate(.7deg)}.studio-pages--approach .sp-approach-collage figure:nth-child(3){transform:rotate(-.5deg)}} @media(prefers-reduced-motion:reduce){.studio-pages--approach .sp-approach-collage figure:nth-child(n){transform:none}} /* Hero diversity local proposal: one identifiable duo, three reviewed-in-context detail candidates. */ .studio-pages--about .sp-hero-bubble--1 img{object-position:50% 42%} .studio-pages--about .sp-hero-bubble--2 img{object-position:50% 50%} .studio-pages--about .sp-hero-bubble--3 img{object-position:50% 50%} .studio-pages--about .sp-hero-bubble--4 img{object-position:50% 50%} /* Contact: the complete card-section surface is paper, without a dark upper strip. */ body.wab-local-ui-contract.wab-local-ui-contract .studio-pages--contact .sp-practical--before-form{background:#fff!important} .studio-pages--contact .sp-practical--before-form:before{display:block} /* One exact Aanpak mosaic contract for Home, Wie and Aanpak. Only sources/focal points vary. */ body.wab-local-ui-contract .wab-photo-collage.wab-photo-collage{position:relative;isolation:isolate;padding:24px 0 40px!important;background:transparent!important;overflow:hidden} body.wab-local-ui-contract .wab-photo-collage.wab-photo-collage:before{display:none!important} body.wab-local-ui-contract .wab-photo-collage.wab-photo-collage>.container{display:grid!important;width:100%!important;max-width:none!important;padding:0!important;margin:0!important;grid-template-columns:minmax(0,1.22fr) minmax(0,1fr)!important;grid-template-rows:repeat(2,minmax(0,1fr))!important;gap:26px 5vw!important;height:590px!important;align-items:stretch!important} body.wab-local-ui-contract .wab-photo-collage.wab-photo-collage figure:nth-child(n){position:relative;box-sizing:border-box;width:100%!important;height:auto!important;min-width:0;border:0!important;border-radius:12px!important;overflow:hidden;box-shadow:none!important;justify-self:stretch!important;align-self:stretch!important;background:transparent!important} body.wab-local-ui-contract .wab-photo-collage.wab-photo-collage figure:nth-child(1){grid-column:1!important;grid-row:1/3!important;margin:74px 0 0!important;transform:rotate(-1deg)!important} body.wab-local-ui-contract .wab-photo-collage.wab-photo-collage figure:nth-child(2){grid-column:2!important;grid-row:1!important;margin:0 0 18px!important;transform:rotate(1.2deg)!important} body.wab-local-ui-contract .wab-photo-collage.wab-photo-collage figure:nth-child(3){grid-column:2!important;grid-row:2!important;margin:-18px 0 44px!important;transform:rotate(-.8deg)!important} body.wab-local-ui-contract .wab-photo-collage.wab-photo-collage figure:nth-child(n) img{display:block;width:100%!important;height:100%!important;max-width:none!important;aspect-ratio:auto!important;object-fit:cover!important;object-position:var(--photo-focus,50% 44%)!important;transform:scale(var(--photo-zoom,1));transform-origin:var(--photo-focus,50% 44%)} @media(min-width:768px) and (max-width:1000px){body.wab-local-ui-contract .wab-photo-collage.wab-photo-collage>.container{height:340px!important;gap:20px 4vw!important}body.wab-local-ui-contract .wab-photo-collage.wab-photo-collage figure:nth-child(1){margin-top:54px!important}} @media(max-width:767px){body.wab-local-ui-contract .wab-photo-collage.wab-photo-collage{padding:10px 0 28px!important}body.wab-local-ui-contract .wab-photo-collage.wab-photo-collage>.container{height:auto!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto!important;gap:20px!important}body.wab-local-ui-contract .wab-photo-collage.wab-photo-collage figure:nth-child(n){grid-column:1!important;grid-row:auto!important;width:94%!important;margin:0!important;aspect-ratio:3/2;transform:rotate(-.6deg)!important}body.wab-local-ui-contract .wab-photo-collage.wab-photo-collage figure:nth-child(2){width:92%!important;justify-self:end!important;transform:rotate(.7deg)!important}body.wab-local-ui-contract .wab-photo-collage.wab-photo-collage figure:nth-child(3){transform:rotate(-.5deg)!important}} @media(prefers-reduced-motion:reduce){body.wab-local-ui-contract .wab-photo-collage.wab-photo-collage figure:nth-child(n){transform:none!important}} /* Ben 22 October: natural 3:2 right tiles; one shared desktop composition. */ @media(min-width:1001px){ body.wab-local-ui-contract .wab-photo-collage.wab-photo-collage>.container{height:calc((100vw - 5vw) / 2.22 * 1.333333 + 26px)!important} body.wab-local-ui-contract .wab-photo-collage.wab-photo-collage figure:nth-child(1){margin-top:56px!important} body.wab-local-ui-contract .wab-photo-collage.wab-photo-collage figure:nth-child(2), body.wab-local-ui-contract .wab-photo-collage.wab-photo-collage figure:nth-child(3){margin:0!important} } body.wab-local-ui-contract .studio-pages--approach .wab-photo-collage.wab-photo-collage{background:#f5f5f2!important} /* Reuse the original header crest shimmer, badge-only. */ :is(.studio-pages--about .sp-origin-award,[data-wab-crest-shimmer]){position:relative} :is(.studio-pages--about .sp-origin-award,[data-wab-crest-shimmer])::after{content:"";position:absolute;inset:0;background:var(--wab-crest-shimmer-image,url("est-2009-dark.svg")) center/100% 100% no-repeat;filter:brightness(1.42) saturate(1.08);opacity:0;pointer-events:none;z-index:2;-webkit-mask-image:linear-gradient(110deg,transparent 37%,#000 50%,transparent 63%);mask-image:linear-gradient(110deg,transparent 37%,#000 50%,transparent 63%);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:260% 100%;mask-size:260% 100%;-webkit-mask-position:160% 0;mask-position:160% 0} @media(prefers-reduced-motion:no-preference){:is(.studio-pages--about .sp-origin-award,[data-wab-crest-shimmer]):is(.is-shimmering,:hover,:focus-visible,:focus-within)::after{animation:home-hero-crest-shimmer 2.8s cubic-bezier(.2,.6,.2,1) 1}} body.wab-local-ui-contract .studio-pages--about .sp-origin-intro p+p{margin-top:16px!important} /* The existing drone scene: keep Ben central without changing collage geometry. */ @media(min-width:768px) and (max-width:1000px){body #wie-bedrijf-fotos.wab-photo-collage figure:first-child{--photo-focus:100% 45%!important}} @media(max-width:767px){body #wie-bedrijf-fotos.wab-photo-collage figure:first-child{--photo-focus:100% 50%!important;--photo-zoom:1.18!important}} /* Aanpak only: sharp white/paper halves behind the unchanged shared mosaic. */ body.wab-local-ui-contract .studio-pages--approach .wab-photo-collage.wab-photo-collage{background:linear-gradient(to bottom,#fff 0 50%,#f5f5f2 50% 100%)!important} /* Bound the shared three-photo geometry, not its viewport-wide background plane. */ @media(min-width:1601px){ body.wab-local-ui-contract .wab-photo-collage.wab-photo-collage>.container{max-width:1600px!important;margin-inline:auto!important;gap:26px 80px!important;height:calc(1520px / 2.22 * 1.333333 + 26px)!important} } /* Ben: move just the outer mosaic edges, clipped by the full-width surface. */ body.wab-local-ui-contract .wab-photo-collage.wab-photo-collage figure:first-child{translate:-10px 0} body.wab-local-ui-contract .wab-photo-collage.wab-photo-collage figure:nth-child(2),body.wab-local-ui-contract .wab-photo-collage.wab-photo-collage figure:nth-child(3){translate:10px 0} /* Compact About opening, with a quiet narrow reading column and separate decoration anchors. */ body.wab-local-ui-contract .studio-pages--about .sp-hero--cinematic{min-height:0!important;padding:160px 0 95px!important} body.wab-local-ui-contract .studio-pages--about .sp-hero--cinematic .sp-identity-copy{width:100%!important;max-width:680px!important;margin:28px auto 0!important} body.wab-local-ui-contract .studio-pages--about .sp-hero--cinematic .sp-identity-copy p{max-width:100%!important;margin:0 0 20px!important} body.wab-local-ui-contract .studio-pages--about .sp-hero-accent--memoji{left:auto;right:24%;bottom:22px} .studio-pages--contact .sp-practical-card--phone p>a{display:block!important;width:100%} .studio-pages--contact .sp-practical-card--phone p>br{display:none} @media(max-width:767px){body.wab-local-ui-contract .studio-pages--about .sp-hero--cinematic{padding:150px 0 110px!important}body.wab-local-ui-contract .studio-pages--about .sp-hero-accent--memoji{right:22%;bottom:26px}body.wab-local-ui-contract .studio-pages--about .sp-hero--cinematic .sp-identity-copy{max-width:100%!important}} body.wab-local-ui-contract #wie-opening .sp-identity-copy{width:100%!important;max-width:680px!important;margin-inline:auto!important} body.wab-local-ui-contract #wie-opening .sp-identity-copy p{max-width:100%!important} /* Keep the mobile Memoji between the two bottom photographs, not over the right phone. */ @media(max-width:767px){body.wab-local-ui-contract .studio-pages--about #wie-opening .sp-hero-accent--memoji{left:45%;right:auto;bottom:24px}}