@import url('/assets/aanbod-studio/studio.css');
@import url('/assets/contact-studio/studio.css');

/* Revision 02: the retained identity and compositions, one consistent journey. */
.studio-revision { --paper:#f7f8fa; }
.studio-revision .site-header { border-bottom:0; height:108px; }
.studio-revision .brand { width:285px; }
.studio-revision .header-contact { border:0; border-bottom:1px solid var(--ink); padding:10px 0; }
.studio-opening { padding-top:38px; padding-bottom:28px; display:grid; grid-template-columns:1.04fr 1fr; gap:0 28px; align-items:center; }
.studio-hero-copy h1 { font-size:clamp(48px,5.25vw,88px); line-height:1.055; letter-spacing:-.054em; margin-top:28px; text-wrap:balance; }
.studio-hero-copy h1 span { color:var(--blue); }
.studio-hero-copy>p { font-size:18px; line-height:1.65; max-width:48ch; margin-top:28px; }
.studio-hero-copy .button { margin-top:28px; }
.hero-facts { display:block; font-size:12px; color:var(--muted); margin-top:12px; }
.studio-hero-art { margin:5px -32px 0 -20px; }
.studio-hero-art .mascot-hero { margin:0; aspect-ratio:1180/630; pointer-events:none; }
.studio-hero-art svg { display:block; width:100%; height:auto; overflow:hidden; }
.studio-hero-art text { font-family:Manrope,Arial,sans-serif; }
.studio-hero-art .display { font-family:Syne,Arial,sans-serif; }
.studio-hero-art>p { margin:8px 0 0 18%; font-size:15px; line-height:1.8; color:var(--muted); }
.studio-hero-art>p strong { font-weight:500; color:var(--ink); }
.studio-explore { grid-column:1/-1; border-top:1px solid var(--line); margin-top:46px; padding-top:19px; display:flex; align-items:center; justify-content:space-between; font-size:13px; }
.studio-explore span { font-size:22px; }
.studio-revision .offer-studio { padding:50px var(--gutter) 40px; --body:18px; }
.studio-revision .offer-studio>div { max-width:1600px; margin-inline:auto; }
.studio-revision .offer-studio .studio-heading { margin-bottom:30px; }
.studio-revision .offer-studio .studio-close { margin-top:28px; }
.studio-revision .offer-studio .studio-detail-link { display:flex; align-items:center; justify-content:space-between; border-top:1px solid #b3a9d7; margin:0 28px 20px; padding-top:13px; font-size:13px!important; min-height:40px; }
.studio-revision .studio-full .studio-detail-link { margin-inline:30px; margin-top:auto; }
.studio-detail-link:focus-visible { outline:3px solid var(--blue); outline-offset:3px; }
.studio-revision .studio-full>.studio-art { margin-block:4px; height:280px; }
.studio-revision .studio-copy p strong { margin-right:.16em; }
.studio-approach { padding-block:82px 64px; }
.approach-heading { display:grid; grid-template-columns:.48fr 1fr; gap:35px; align-items:start; margin-bottom:45px; }
.approach-heading .eyebrow { padding-top:9px; }
.approach-heading h2 { font-size:clamp(34px,3.65vw,58px); line-height:1.1; }
.approach-heading h2 span { color:var(--blue); }
.approach-grid { display:grid; grid-template-columns:1.08fr 1fr; gap:7%; align-items:center; }
.story-figure { min-width:0; }
.story-stage { position:relative; aspect-ratio:1280/986; background:#f7f6fd; overflow:hidden; }
.story-poster { width:100%; height:100%; object-fit:contain; }
.story-runtime { position:absolute; inset:0; display:none; }
.story-runtime svg { display:block; width:100%; height:100%; }
.story-ready .story-runtime { display:block; }
.story-ready .story-poster { visibility:hidden; }
.story-figure figcaption { border-top:1px solid var(--line); padding-top:18px; margin-top:16px; display:grid; grid-template-columns:1fr auto; gap:8px 20px; }
.story-kicker { font-size:11px; text-transform:uppercase; letter-spacing:.07em; font-weight:700; }
.story-figure figcaption p { grid-column:1/-1; font-size:16px; max-width:46ch; min-height:3.2em; }
.story-quiet { grid-column:2; grid-row:1; text-decoration:underline; text-underline-offset:4px; font-size:12px; }
.story-disclosure { grid-column:1/-1; font-size:11px; color:var(--muted); }
.approach-steps { list-style:none; margin:0; padding:0; }
.approach-steps { width:100%; min-width:0; }
.approach-steps li { padding:10px 0 18px; border-top:1px solid var(--line); }
.approach-steps li:last-child { padding-bottom:0; }
.story-step { display:grid; grid-template-columns:36px 1fr 24px; gap:14px; align-items:center; width:100%; min-height:48px; padding:6px 0; border:0; background:none; font:inherit; letter-spacing:inherit; line-height:inherit; text-align:left; transform-origin:left center; transition:transform 160ms var(--ease-out),color 160ms ease; }
.story-step:active:not(:disabled) { transform:scale(.97); }
.story-step:disabled { cursor:default; }
.story-step:focus-visible { outline-offset:4px; border-radius:2px; }
.step-number { font:500 12px/1.5 Manrope,Arial,sans-serif; letter-spacing:0; color:var(--muted); }
.step-replay { font:400 22px/1 Manrope,Arial,sans-serif; color:var(--muted); text-align:right; }
.story-step:disabled .step-replay { visibility:hidden; }
.approach-steps h3 { font-size:28px; line-height:1.15; }
.approach-steps p { font-size:16px; line-height:1.65; margin:3px 0 0 50px; color:var(--muted); }
.approach-steps li[data-current] .story-step,.approach-steps li[data-current] .step-number,.approach-steps li[data-current] .step-replay { color:var(--blue); }
@media(hover:hover) and (pointer:fine) { .story-step:hover:not(:disabled),.story-step:hover:not(:disabled) .step-replay { color:var(--blue); } }
.studio-example { padding-block:60px; background:#ececf2; }
.example-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:7%; align-items:center; }
.example-copy h2 { font-size:clamp(35px,3.7vw,58px); line-height:1.09; margin-top:24px; }
.example-copy h2 span { color:var(--blue); }
.example-copy p { font-size:18px; max-width:38ch; margin-top:25px; }
.example-copy .text-link { margin-top:24px; font-size:15px; }
.example-disclosure { display:block; font-size:12px; color:var(--muted); margin-top:19px; }
.example-art { display:block; min-width:0; }
.example-browser { border:1px solid #aaa6b8; border-radius:5px; overflow:hidden; background:var(--paper); }
.example-browser-bar { display:flex; justify-content:space-between; align-items:center; height:27px; padding:0 12px; border-bottom:1px solid #d5d3de; background:#eeedf5; color:var(--muted); font-size:9px; }
.example-browser-bar>span:first-child { font-size:6px; letter-spacing:3px; }
.example-site { display:grid; grid-template-columns:.85fr 1.15fr; min-height:300px; }
.example-site-copy { display:flex; flex-direction:column; justify-content:center; padding:28px 23px; }
.example-brand { font-family:Syne,sans-serif; font-size:24px; font-weight:700; margin-bottom:32px; }
.example-site-copy strong { font-family:Syne,sans-serif; font-size:clamp(23px,2.3vw,36px); line-height:1.07; font-weight:600; letter-spacing:-.04em; }
.example-site-copy>span:last-child { font-size:11px; line-height:1.65; margin-top:16px; }
.example-site img { width:100%; height:100%; object-fit:cover; object-position:center; }
.example-open { margin-top:15px; font-size:12px; display:flex; justify-content:space-between; }
.example-open>span { font-size:18px; }
.studio-revision .faq-band { background:#ececf2; }
.studio-revision .faq { padding-block:64px 72px; grid-template-columns:1.08fr 1fr; gap:7%; }
.studio-revision .faq-list details[open] summary { color:var(--blue); }
@media(hover:hover) and (pointer:fine) { .studio-revision .faq-list summary:hover { color:var(--blue); } }
.studio-revision .contact-studio { padding-inline:var(--gutter); }
.studio-revision .contact-studio>div { max-width:1600px; margin-inline:auto; }
.studio-revision .page-lead { padding-top:45px; padding-bottom:42px; }
.studio-revision .page-lead h1 { font-size:clamp(44px,5.6vw,88px); }
.studio-revision.booking-page .page-lead h1 { font-size:clamp(40px,4.5vw,64px); }
.revision-history { padding-block:20px 35px; }
@media(hover:hover) and (pointer:fine) { .studio-detail-link:hover,.example-art:hover .example-open,.studio-explore:hover { color:var(--blue); } }
@media(max-width:1100px) {
 .studio-revision .brand { width:240px; }
 .studio-opening { grid-template-columns:1.08fr 1fr; gap:0 10px; }
 .studio-hero-copy h1 { font-size:clamp(44px,5.3vw,65px); }
 .studio-hero-art { margin-inline:-10px; }
 .studio-hero-art>p { margin-left:5%; font-size:13px; }
 .studio-revision .studio-card { position:relative; padding-bottom:55px; }
 .studio-revision .studio-card .studio-detail-link { position:absolute; bottom:0; left:0; right:0; margin-bottom:12px; }
 .studio-revision .studio-full>.studio-art { height:260px; }
 .approach-grid { gap:5%; }
 .approach-heading { grid-template-columns:.35fr 1fr; }
 .approach-steps h3 { font-size:25px; }
 .example-site { min-height:260px; }
 .example-site-copy { padding:22px 15px; }
}
@media(max-width:760px) {
 .studio-revision .site-header { height:86px; }
 .studio-revision .brand { width:177px; }
 .studio-revision .header-contact { padding:8px 0; }
 .studio-opening { display:flex; flex-direction:column; align-items:stretch; padding-top:27px; padding-bottom:22px; }
 .studio-hero-copy h1 { font-size:clamp(40px,8.1vw,61px); line-height:1.055; margin-top:25px; letter-spacing:-.05em; text-wrap:initial; max-width:14ch; }
 .studio-hero-copy>p { margin-top:24px; font-size:18px; }
 .studio-hero-copy .button { margin-top:23px; font-size:14px; gap:22px; }
 .hero-facts { font-size:11px; }
 .studio-hero-art { margin:18px -14px 0; }
 .studio-hero-art>p { display:none; }
 .studio-explore { margin-top:19px; padding-top:17px; font-size:12px; }
 .studio-revision .offer-studio { padding:35px var(--gutter); }
 .studio-revision .offer-studio h2 { font-size:34px; }
 .studio-revision .offer-studio .studio-heading { grid-template-columns:1fr; gap:19px; }
 .studio-revision .offer-studio .studio-heading>p { max-width:none; justify-self:start; }
 .studio-revision .studio-card { padding-bottom:50px; }
 .studio-revision .studio-full>.studio-art { height:auto; }
 .studio-revision .studio-full .studio-copy { padding-bottom:24px; }
 .studio-revision .studio-top .studio-art { height:135px; }
 .studio-revision .offer-studio .studio-detail-link { margin-inline:24px; }
 .studio-revision .offer-studio .studio-close { margin-top:26px; }
 .studio-revision .offer-studio .studio-close p { font-size:17px!important; }
 .studio-revision .offer-studio .studio-cta { font-size:15px!important; padding:17px; min-height:58px; }
 .studio-approach { padding-block:50px 42px; }
 .approach-heading { display:block; margin-bottom:28px; }
 .approach-heading h2 { margin-top:22px; font-size:34px; }
 .approach-grid { display:flex; flex-direction:column; gap:32px; }
 .story-figure { width:100%; }
 .story-figure figcaption p { font-size:15px; min-height:3.2em; }
 .approach-steps li { padding-block:10px 18px; }
 .story-step { grid-template-columns:28px 1fr 22px; gap:11px; }
 .approach-steps h3 { font-size:27px; }
 .approach-steps p { font-size:17px; line-height:1.65; margin:3px 0 0 39px; }
 .studio-example { padding-block:42px; }
 .example-grid { display:flex; flex-direction:column; gap:30px; align-items:stretch; }
 .example-copy h2 { font-size:36px; margin-top:21px; }
 .example-copy p { font-size:18px; margin-top:22px; }
 .example-copy .text-link { font-size:15px; margin-top:20px; }
 .example-site { min-height:235px; grid-template-columns:1fr 1fr; }
 .example-site-copy { padding:18px 14px; }
 .example-brand { font-size:23px; margin-bottom:27px; }
 .example-site-copy strong { font-size:clamp(18px,5.2vw,24px); }
 .example-site-copy>span:last-child { font-size:10px; }
 .studio-revision .faq { padding-block:46px; }
 .studio-revision .page-lead { padding-top:30px; padding-bottom:35px; }
 .studio-revision .page-lead h1 { font-size:45px; }
 .studio-revision.contact-page .page-lead h1 { font-size:36px; line-height:1.08; }
}
@media(max-width:350px) {
 .studio-revision .brand { width:149px; }
 .studio-hero-copy h1 { font-size:36px; }
 .studio-hero-copy>p { font-size:17px; }
 .studio-hero-copy .button { padding-inline:14px; gap:14px; font-size:12px; }
 .studio-revision .offer-studio h2 { font-size:30px; }
 .studio-revision .offer-studio .studio-full>h3,.studio-revision .offer-studio .studio-top h3 { font-size:29px; }
 .approach-heading h2 { font-size:30px; }
 .example-copy h2 { font-size:32px; }
 .example-site-copy strong { font-size:18px; }
 .studio-revision .page-lead h1 { font-size:39px; }
}
@media(prefers-reduced-motion:reduce) { .studio-revision *, .studio-revision *::before,.studio-revision *::after { animation:none!important; transition:none!important; } }
html[data-motion=off] .studio-revision *,html[data-motion=off] .studio-revision *::before,html[data-motion=off] .studio-revision *::after { animation:none!important; transition:none!important; }