/*
Theme Name: CBRG Websites
Author: CBRG Websites
Description: Maatwerk WordPress-thema naar cyborgwebsites.nl. Inclusief video, conceptaanvraag en zelf in te vullen portfolio.
Version: 1.2.0
Requires at least: 6.6
Requires PHP: 8.0
Text Domain: cbrg
*/
@font-face{font-family:Futura;src:url('assets/book.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Futura;src:url('assets/bold.ttf') format('truetype');font-weight:600 700;font-style:normal;font-display:swap}
@font-face{font-family:Futura;src:url('assets/extra-bold.ttf') format('truetype');font-weight:800 900;font-style:normal;font-display:swap}
:root{--navy:#1d2440;--cream:#f9fcf4;--yellow:#fc0;--gutter:120px;--section:120px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:120px}body{margin:0;background:var(--navy);color:var(--cream);font:400 16px/1.5 Futura,sans-serif}button,input,textarea{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}a{color:inherit}button{cursor:pointer}img{max-width:100%;height:auto}h1,h2,h3,p{margin:0}h1,h2,h3{font-weight:900;text-transform:uppercase;line-height:1}h2{font-size:64px}h3{font-size:32px}p+p{margin-top:16px}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--yellow);outline-offset:6px}button:disabled{opacity:.45;cursor:default}.wrap{width:min(100% - var(--gutter)*2,1440px);margin-inline:auto}.section{padding-block:var(--section);scroll-margin-top:20px}.eyebrow{font-size:16px;line-height:1.5;text-transform:none;font-weight:400;margin-bottom:8px}.center{text-align:center}.copy{max-width:640px;margin-inline:auto}.skip-link{position:fixed;top:-100px;left:16px;background:var(--cream);color:var(--navy);z-index:2000;padding:12px}.skip-link:focus{top:16px}.site-header{position:fixed;inset:0 0 auto;z-index:100;background:linear-gradient(#030612f5,rgba(3,6,18,0));padding:48px;display:flex;justify-content:space-between;align-items:center;gap:24px}.admin-bar .site-header{top:32px}.brand{display:block;width:82px;flex:none}.brand img{width:100%;display:block}.desktop-nav{display:flex;gap:32px}.desktop-nav a{text-decoration:none}.desktop-nav a:hover{text-decoration:underline;text-underline-offset:6px}.button{display:inline-flex;align-items:center;justify-content:center;gap:4px;border:0;border-radius:100px;background:var(--cream);color:var(--navy);font-size:16px;font-weight:900;line-height:1;text-decoration:none;text-transform:uppercase;padding:32px;min-height:80px;transition:background .2s,transform .2s}.button:hover{background:var(--yellow);transform:translateY(-2px)}.button-small{font-size:12px;padding:16px;min-height:44px}.cta-group{margin-top:32px;text-align:center}.cta-note{margin-top:24px;font-size:16px}.hero{padding-top:168px}.hero h1{font-size:clamp(64px,9.49vw,144px);line-height:.95;letter-spacing:-.04em}.hero h1 span{display:block}.video-frame{width:min(640px,100%);padding:16px;background:var(--cream);margin:64px auto;transform:rotate(-2deg);box-shadow:0 32px 32px #0005}.video-frame video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#000}.hero .cta-group{margin-top:0}.statement h2{max-width:800px;margin:auto;line-height:1.2}.accent{color:var(--yellow)}.stats{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;max-width:650px;margin:64px auto 0}.stat{border:2px solid var(--cream);border-radius:100px;padding:32px;font-weight:900;line-height:1;text-transform:uppercase}.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:64px;margin-top:20px}.step .week{margin-bottom:8px}.step h3{margin-bottom:32px}.step:last-child h3{color:var(--yellow)}.concept .concept-pictures{display:flex;justify-content:center;align-items:center;gap:0;height:470px;margin:32px auto;max-width:900px}.concept-pictures img{width:30%;max-width:270px;object-fit:contain;filter:drop-shadow(0 24px 18px #0005)}.concept-pictures img:nth-child(1){transform:rotate(-10deg)}.concept-pictures img:nth-child(2){transform:rotate(5deg);z-index:1}.concept-pictures img:nth-child(3){transform:rotate(17deg)}.unique-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:center}.unique h2{max-width:520px}.benefit-cards{display:flex;gap:32px;align-items:stretch}.benefit-card{flex:1;background:var(--cream);color:var(--navy);padding:32px;min-height:289px;display:flex;align-items:center;transform:rotate(-3deg);font-size:12px;line-height:1.1;font-weight:600;text-transform:uppercase;box-shadow:0 24px 32px #0004}.benefit-card:nth-child(2){background:var(--navy);color:var(--cream);border:16px solid var(--cream);transform:rotate(5deg)}.benefit-card ul{list-style:none;margin:0;padding:0}.benefit-card li+li{margin-top:16px}.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin:64px auto 80px;text-align:left}.plan{position:relative;border:16px solid var(--cream);padding:32px;box-shadow:0 32px 32px #0005}.plan:nth-child(2){transform:rotate(-3deg)}.plan h3{margin-bottom:20px}.plan ul{padding-left:20px;margin:0 0 20px}.plan .price{font-weight:900}.plan .tax{font-weight:400;margin-left:8px}.badge{position:absolute;bottom:32px;right:32px;border-radius:100px;background:var(--yellow);color:var(--navy);padding:12px 16px;transform:translateY(40%)}.portfolio-layout{display:grid;grid-template-columns:1fr 1fr;gap:64px;min-height:560px}.portfolio-heading{display:flex;flex-direction:column;align-items:flex-start}.slider-controls{display:flex;gap:16px;margin-top:auto;padding-top:40px}.slider-controls button{border:0;background:var(--cream);color:var(--navy);border-radius:50%;width:85px;height:85px;font-weight:900;font-size:32px}.slider-controls button:hover{background:var(--yellow)}.project-stack{position:relative;min-height:560px;isolation:isolate}.project-card{position:absolute;inset:0;margin:auto;width:min(100%,400px);height:560px;transform:translateX(calc(var(--offset)*12px)) rotate(calc(var(--offset)*3deg)) scale(calc(1 - var(--distance)*.025));opacity:1;z-index:calc(20 - var(--distance));transition:transform .45s,opacity .3s;pointer-events:none;box-shadow:0 20px 30px #0005;background:var(--cream);border:16px solid var(--cream);color:var(--navy);overflow:hidden}.project-card.is-active{pointer-events:auto}.project-card img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}.project-card figcaption{position:absolute;inset:auto 0 0;background:var(--cream);padding:16px;text-align:center}.project-card a{color:var(--navy);font-weight:700}.portfolio-placeholder{height:100%;display:flex;align-items:center;justify-content:center;text-align:center;padding:32px;background:var(--navy);color:var(--cream);font-weight:900;font-size:24px;line-height:1.1;text-transform:uppercase}.slider-status{margin-top:20px}.contact-layout{display:grid;grid-template-columns:1fr 1.5fr;align-items:center;gap:64px;min-height:640px}.contact h2{max-width:390px}.contact .contact-copy{margin-top:32px;max-width:324px}.contact .cta-group{display:inline-block}.shaker{width:100%;max-height:720px;object-fit:contain;transform:rotate(8deg)}.site-footer{padding:240px 0 120px}.footer-layout{display:flex;justify-content:space-between;gap:20px;align-items:center}.footer-logo{width:60%;max-width:610px}.footer-contact{text-align:right;font-size:32px;line-height:1;font-weight:900;text-transform:uppercase}.footer-contact a{display:block;text-decoration:none;overflow-wrap:anywhere}.footer-contact a+a{margin-top:20px}.footer-contact a:hover{color:var(--yellow)}dialog{width:min(680px,calc(100% - 32px));max-height:calc(100dvh - 32px);padding:112px 64px;border:16px solid var(--cream);background:var(--navy);color:var(--cream);overflow:auto}dialog::backdrop{background:#000b}.dialog-close{position:absolute;right:20px;top:12px;background:none;color:var(--cream);border:0;font-size:40px;line-height:1}.dialog-title{font-size:32px;text-align:center;max-width:380px;margin:0 auto 32px}.concept-form{max-width:380px;margin:auto}.field{display:block;font-weight:900;text-transform:uppercase;margin-bottom:12px}.field input{display:block;width:100%;min-height:44px;border:2px solid var(--cream);background:transparent;border-radius:100px;color:var(--cream);padding:8px 16px;margin-top:4px;outline-offset:3px}.concept-form .button{width:100%;margin-top:4px}.form-status{margin-bottom:24px}.honeypot{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}.noscript-form{max-width:640px;margin:0 auto;padding:32px}.page-body{padding-top:180px;min-height:60vh}.page-body h1{font-size:64px;margin-bottom:40px}.page-body .entry-content{max-width:800px}.page-body .entry-content h2{font-size:32px;margin:32px 0 16px}.page-body .entry-content img{height:auto}.mobile-menu{display:none}
h1,h2,h3{letter-spacing:-.06em}.hero h1{font-size:120px;letter-spacing:-.06em}.hero h1 span{white-space:nowrap}.emoji{width:1em;height:1em;display:inline-block;vertical-align:-.1em}.reveal-title{overflow:hidden}.reveal-title .reveal-word{display:inline-block;animation:cbrg-rise .7s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--word-index)*.055s)}@keyframes cbrg-rise{from{transform:translateY(120%);opacity:0}to{transform:translateY(0);opacity:1}}
.section{scroll-margin-top:calc(0px - var(--section))}.concept{overflow:hidden}.desktop-nav{position:absolute;left:50%;transform:translateX(-50%)}
@media(min-width:1600px){.hero h1{font-size:144px}}
@media(max-width:1100px){:root{--gutter:64px;--section:88px}.site-header{padding:32px}.desktop-nav{gap:20px}.steps{gap:32px}.steps h3{font-size:27px}.unique-layout{grid-template-columns:1fr;gap:48px}.unique h2{max-width:700px}.benefit-cards{max-width:600px;margin:auto}.plans{gap:24px}.plan{padding:24px;border-width:12px}.plan h3{font-size:26px}.plan .badge{right:16px;bottom:12px}.footer-contact{font-size:24px}.contact-layout{gap:32px}.hero h1{font-size:9.8vw}}
@media(max-width:767px){:root{--gutter:32px;--section:64px}html{scroll-padding-top:90px}h2{font-size:32px;line-height:1.2}h3{font-size:24px}.site-header{padding:16px 8px;gap:8px}.admin-bar .site-header{top:46px}.desktop-nav{display:none}.brand{width:82px}.button-small{font-size:10px;padding:16px 8px;white-space:nowrap}.hero{padding-top:112px;padding-bottom:96px}.hero h1{font-size:48px;line-height:.95;letter-spacing:-.04em}.hero h1 span{display:inline}.hero h1 span+span:before{content:' '}.video-frame{width:240px;margin:40px auto;padding:16px}.video-frame video{aspect-ratio:1;object-fit:cover}.button{font-size:14px;padding:28px 20px;min-height:76px}.button-small{font-size:10px;min-height:44px;padding:16px 8px}.cta-note{font-size:14px;margin-top:20px}.stats{gap:12px;margin-top:32px}.stat{font-size:12px;padding:20px}.steps{grid-template-columns:1fr;gap:32px;margin-top:32px}.step h3{margin-bottom:16px}.concept .concept-pictures{height:270px;width:calc(100% + 32px);margin-left:-16px}.concept-pictures img{width:33%;max-height:240px}.concept h2{font-size:32px}.unique-layout{gap:40px}.benefit-cards{gap:16px}.benefit-card{padding:16px;min-height:240px;font-size:11px}.benefit-card:nth-child(2){border-width:8px}.plans{grid-template-columns:1fr;gap:40px;margin:40px 0 48px}.plan{padding:32px;border-width:12px;min-height:310px}.plan h3{font-size:32px}.plan .badge{right:24px;bottom:24px}.portfolio-layout{grid-template-columns:1fr;gap:40px}.portfolio-heading .slider-controls{order:2}.slider-controls{padding-top:24px}.slider-controls button{width:56px;height:56px;font-size:24px}.project-stack{min-height:420px;margin:0 16px}.project-card{height:420px;width:100%;max-width:300px;border-width:10px;transform:translateX(calc(var(--offset)*5px)) rotate(calc(var(--offset)*2deg)) scale(calc(1 - var(--distance)*.025))}.portfolio-placeholder{font-size:24px}.contact-layout{grid-template-columns:1fr;gap:32px}.contact h2{font-size:48px;line-height:1;max-width:340px}.contact-copy{max-width:none}.contact .shaker{grid-row:2;max-height:440px;transform:rotate(8deg)}.contact .cta-group{display:block}.site-footer{padding:100px 0 64px}.footer-layout{flex-direction:column;align-items:flex-start;gap:48px}.footer-logo{width:100%;max-width:420px}.footer-contact{text-align:left;font-size:24px}.dialog-title{font-size:26px}dialog{padding:72px 20px 40px;border-width:10px}.page-body h1{font-size:40px}.mobile-menu{display:block;margin-top:32px}.mobile-menu nav{display:flex;flex-wrap:wrap;gap:16px;margin-top:16px}}
@media(max-width:1100px) and (min-width:768px){.hero h1{font-size:9vw}}
@media(max-width:767px){.hero h1{font-size:48px;letter-spacing:-.06em}.hero h1 span{white-space:normal}.mobile-menu .button-small{font-size:10px}}
@media(max-width:767px){.hero{padding-top:108px}.hero .video-frame{margin-block:32px}.button:not(.button-small){font-size:16px;min-height:80px}.site-header .button-small{font-size:12px}.concept .concept-pictures{width:100%;margin-left:0}}
@media(min-width:768px) and (max-width:1000px){.desktop-nav{display:none}.mobile-menu{display:block;margin-top:32px}.mobile-menu nav{display:flex;gap:20px;margin-top:16px}}
@media(max-width:360px){.brand{width:70px}.site-header .button-small{font-size:10px}.hero h1{font-size:42px}.button:not(.button-small){font-size:14px}.footer-contact{font-size:20px}}
.plan{min-width:0}.plan li{overflow-wrap:anywhere}
@media(max-width:767px){.plans{grid-template-columns:minmax(0,1fr)}}
@media(max-width:360px){.plan{padding:24px}.plan h3{font-size:28px}.plan:nth-child(2){transform:rotate(-2deg)}}
/* Text remains independent of borders, backgrounds and interactive controls. */
p,.plan ul,.benefit-card ul,.project-card figcaption,.badge,.entry-content>ul,.entry-content>ol{opacity:.7}
.stats>.stat{margin:0;display:flex;align-items:center;justify-content:center;opacity:1}
.plan p{opacity:1}.plan .tax{opacity:.7}
.concept-form .field:last-of-type{margin-bottom:0}
.concept-form .button{margin-top:32px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}