/* One brand palette. Orange sampled from the embedded logo PNG (#f7712d).
   Purple carries text/structure; orange marks actions; green supports selected ideas. */
:root{--orange:#f7712d;--purple:#43235b;--green:#c4e889;--pink:var(--green);--surface-soft:#fcfaf8;--surface-pink:#f2f7ec;--brand-tint:#fff0e8;--brand-light:#fcfaf8}
body{background:var(--brand-light)}
body :is(.studio-hero,.focus-proof,.social-office,.contact-v3,.dossier-index-heading){background:var(--brand-light)}
body :is(.focus-distinction,.focus-personal,.current-work){background:#fff}
body .focus-explorer{background:var(--purple)}
body .focus-explorer :is(.eyebrow,h2 em,.explorer-thread i){color:var(--orange)}
body .explorer-thread span{background:var(--orange)}
body .focus-case[open] summary{background:var(--brand-tint);border-left:3px solid var(--orange)}
body .focus-case{background:white}
body .focus-case[open] .case-toggle{background:transparent;color:var(--purple)}
body .button-orange{background:var(--orange);color:var(--purple);border-color:var(--orange)}
body .button-orange:hover{background:var(--purple);color:white;border-color:var(--purple)}
body .studio-hero h1 em{color:var(--purple)}
body .studio-hero h1 em:after{background:var(--orange)}
body .studio-copy>.eyebrow>span{width:22px;height:2px;border-radius:0;background:var(--orange)}
.studio-interactive{padding-right:0;align-self:center}
.studio-interactive .hero-person{display:grid;grid-template-columns:1.1fr .8fr;align-items:stretch;background:white;border-radius:64px 4px 0 0;box-shadow:none;overflow:hidden}
.studio-interactive .studio-photo{height:300px;border-radius:0;min-width:0}
.studio-interactive .studio-photo img{object-position:center 22%}
.studio-interactive .hero-person figcaption{display:flex;flex-direction:column;justify-content:center;align-items:start;padding:24px;gap:24px;border-bottom:1px solid var(--line)}
.studio-interactive .studio-name{font-family:var(--heading);font-size:21px;line-height:1.25;overflow-wrap:anywhere}
.studio-interactive .studio-name strong{display:block;font-size:16px;margin-top:5px}
.studio-interactive .studio-quote{padding:15px 0 0;border-left:0;border-top:2px solid var(--orange);font-size:15px;line-height:1.5}
.studio-interactive .studio-arc{inset:-18px -18px 48% 38%;border-width:1px;border-top-color:var(--orange);border-right-color:var(--orange)}
.hero-network{position:relative;z-index:2;background:white;border:1px solid var(--line);border-top:0;padding:24px 26px 20px;color:var(--purple);border-radius:0 0 30px 4px}
.hero-network>.eyebrow{font-size:10px;letter-spacing:.1em;margin-bottom:16px}
.hero-network-controls{display:flex;gap:4px;margin-bottom:20px;border-bottom:1px solid var(--line)}
.hero-network-controls[hidden],.network-reading [hidden]{display:none}
.hero-network-controls button{flex:1;min-height:44px;padding:9px 4px;background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-1px;font-size:13px;color:var(--purple);text-align:left}
.hero-network-controls button[aria-pressed=true]{border-bottom-color:var(--orange);font-weight:700}
.hero-network-controls button:hover{background:var(--brand-tint)}
.network-perspectives{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;font-size:11px;text-align:center;line-height:1.4}
.network-perspectives span{padding:8px 3px;border:1px solid var(--line);border-radius:3px}
.hero-network-map svg{display:block;width:100%;height:32px;overflow:visible}
.hero-network-map path{fill:none;stroke:var(--orange);stroke-width:1.5;vector-effect:non-scaling-stroke}
.network-reading h2{font-size:24px;line-height:1.17;letter-spacing:-.035em;color:var(--purple);margin:7px 0 10px}
.network-reading p{font-size:14px;line-height:1.6;margin:0;color:#51495a}
.network-reading section+section{margin-top:20px}
.network-ready .network-reading section+section{margin-top:0}
.network-ready .network-reading{min-height:115px}
.network-example-note{font-size:10px;line-height:1.5;color:#686170;margin:17px 0 0}
body>main>section.focus-invitation{width:calc(100% - 2 * var(--gutter));max-width:1280px;margin:40px auto 72px;padding:0;grid-template-columns:1.1fr 1fr;border-radius:4px 54px 4px 4px;align-items:stretch}
body .focus-invitation>div{display:flex;flex-direction:column;justify-content:center;align-items:start;padding:clamp(28px,4vw,64px);min-width:0}
body .focus-invitation h2{font-size:clamp(30px,3vw,46px)}
body .focus-invitation h2 em,body .focus-invitation .eyebrow{color:var(--orange)}
body .focus-invitation figure{min-height:0;height:auto;align-self:stretch}
body .focus-invitation img{width:100%;height:100%;aspect-ratio:1;object-fit:cover;object-position:center}
body .focus-invitation figcaption{font-size:12px}
.insights-perspectives{padding:clamp(26px,3.5vw,48px);background:white;border:1px solid var(--line);border-top:3px solid var(--orange);border-radius:4px 60px 4px 4px;color:var(--purple);position:relative}
body.page-inzichten .insights-perspectives>.eyebrow{color:var(--purple);font-size:10px}
.insights-perspectives h2{font-size:clamp(36px,4vw,56px);line-height:1.05;margin-bottom:22px}
.insights-perspectives h2 em{color:var(--purple);text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:2px;text-underline-offset:8px}
body.page-inzichten .insights-perspectives>p.perspective-instruction{font-size:13px;color:var(--muted);margin-bottom:20px}
.insights-perspectives details{border-top:1px solid var(--line)}
.insights-perspectives details:last-child{border-bottom:1px solid var(--line)}
.insights-perspectives summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:16px;line-height:1.4;font-weight:600;padding:18px 0}
.insights-perspectives summary::-webkit-details-marker{display:none}
.insights-perspectives summary span{font-size:23px;font-weight:400}
.insights-perspectives details[open] summary span{transform:rotate(45deg)}
.insights-perspectives details div{padding-bottom:22px;font-size:14px;line-height:1.6}
.insights-perspectives details div p{margin-bottom:12px}
.insights-perspectives details a{border-bottom:1px solid var(--orange);padding-bottom:4px}
body.page-inzichten .edition-samenwerking,body.page-inzichten .edition-samenwerking .edition-circles b{background:var(--orange)}
body.page-inzichten .edition-cijfers{background:var(--green)}
.edition-cijfers svg circle,.trend-drawing circle{fill:none;stroke:var(--purple);stroke-width:2}
body.page-over-shantie{--about-orange:var(--orange);--about-sage:var(--green);--about-cream:var(--brand-light)}
body.page-over-shantie .about-v3{background:var(--brand-light)}
body .work-connections span:before{height:1px;width:16px;border-radius:0;background:var(--orange)}
/* A line draws once as a section enters the viewport. No image motion or looping decoration. */
.brand-line-host{position:relative}
.brand-line-drawing{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:visible}
.brand-line-drawing path{fill:none;stroke:var(--orange);stroke-width:1;vector-effect:non-scaling-stroke}
@media(prefers-reduced-motion:no-preference){
 .line-arrived>.brand-line-drawing path{animation:brand-draw 1800ms ease-out both}
 .hero-network[data-stage="0"] path{animation:network-draw-a 900ms ease-out both}
 .hero-network[data-stage="1"] path{animation:network-draw-b 900ms ease-out both}
 .hero-network[data-stage="2"] path{animation:network-draw-c 900ms ease-out both}
 @keyframes brand-draw{from{stroke-dasharray:160;stroke-dashoffset:160}to{stroke-dasharray:160;stroke-dashoffset:0}}
 @keyframes network-draw-a{from{stroke-dasharray:650;stroke-dashoffset:650}to{stroke-dasharray:650;stroke-dashoffset:0}}
 @keyframes network-draw-b{from{stroke-dasharray:650;stroke-dashoffset:650}to{stroke-dasharray:650;stroke-dashoffset:0}}
 @keyframes network-draw-c{from{stroke-dasharray:650;stroke-dashoffset:650}to{stroke-dasharray:650;stroke-dashoffset:0}}
}
@media(max-width:1100px) and (min-width:761px){.studio-interactive .hero-person{grid-template-columns:1fr}.studio-interactive .studio-photo{height:270px}.studio-interactive .hero-person figcaption{flex-direction:row;align-items:center;padding:18px;gap:18px}.studio-interactive .studio-quote{border-top:0;border-left:1px solid var(--orange);padding:0 0 0 18px;font-size:13px}.hero-network{padding:20px}.hero-network-controls button{font-size:12px}}
@media(max-width:760px){
 .studio-interactive .hero-person{grid-template-columns:1fr 1fr}
 .studio-interactive .studio-photo{height:270px}
 .studio-interactive .hero-person figcaption{padding:18px 14px;gap:18px}
 .studio-interactive .studio-name{font-size:20px}.studio-interactive .studio-name strong{font-size:14px}
 .studio-interactive .studio-quote{font-size:13px}
 .hero-network{padding:24px 18px 18px}.hero-network-controls button{font-size:12px}
 .network-reading h2{font-size:23px}.network-ready .network-reading{min-height:135px}
 body>main>section.focus-invitation{grid-template-columns:1fr;width:calc(100% - 2 * var(--gutter));margin:28px auto 48px;border-radius:4px 36px 4px 4px}
 body .focus-invitation>div{padding:30px 24px}
 body .focus-invitation figure{height:auto}.focus-invitation img{aspect-ratio:1}
 .insights-perspectives{padding:28px 23px}.insights-perspectives h2{font-size:42px}
}
@media(max-width:360px){.studio-interactive .hero-person{grid-template-columns:1fr}.studio-interactive .studio-photo{height:310px}.studio-interactive .hero-person figcaption{display:block}.studio-interactive .studio-quote{margin-top:12px}.hero-network-controls button{font-size:11px}.network-perspectives{font-size:10px}}
@media(prefers-reduced-motion:reduce){.brand-line-drawing path,.hero-network path{animation:none!important}}
/* The collaboration is a clear bridge between the practice and the building work. */
body .eef-connection{background:var(--brand-light);color:var(--purple);border-top:1px solid var(--line);position:relative;padding-block:74px;align-items:start}
body .eef-connection h2,body .eef-connection h2 em{color:var(--purple)}
body .eef-connection .eyebrow{color:var(--purple)}
body .eef-connection p{font-size:17px;line-height:1.75}
.eef-connection-mark{display:flex;align-items:center;flex-wrap:wrap;gap:20px;margin-top:38px;padding-top:24px;border-top:1px solid var(--line);font-family:var(--heading);font-size:19px}

body .eef-other-collaborations{font-size:13px;line-height:1.6;margin:25px 0 0;color:#62596b}
body .focus-faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(30px,6vw,90px);padding-block:80px;background:var(--brand-light);align-items:start}
.focus-faq-heading{position:sticky;top:120px}
body .focus-faq h2{font-size:clamp(32px,3.4vw,48px);margin:0 0 22px;color:var(--purple)}
.focus-faq-heading>p:not(.eyebrow){font-size:16px;color:var(--muted);max-width:34ch;line-height:1.65}
.focus-faq-heading>.eyebrow{border-top:2px solid var(--orange);padding-top:20px}
.focus-faq-questions{counter-reset:faq}
body .focus-faq details{counter-increment:faq;padding:0;border-bottom:1px solid var(--line)}
body .focus-faq details:first-child{border-top:1px solid var(--line)}
body .focus-faq summary{display:grid;grid-template-columns:26px minmax(0,1fr) 22px;align-items:start;gap:14px;padding:23px 0;list-style:none;font-family:var(--heading);font-size:20px;line-height:1.35;color:var(--purple)}
body .focus-faq summary::-webkit-details-marker{display:none}
body .focus-faq summary::before{content:'0' counter(faq);font-family:var(--body);font-size:12px;padding-top:6px}
body .focus-faq summary::after{content:'+';font-family:var(--body);font-size:25px;font-weight:400;line-height:1}
body .focus-faq details[open] summary::after{content:'−'}
body .focus-faq details[open]{border-bottom:2px solid var(--orange)}
body .focus-faq details p{font-size:16px;line-height:1.75;padding:0 28px 0 40px}
body .focus-faq details>a{margin:0 28px 24px 40px;font-size:14px}
@media(max-width:760px){body .eef-connection{padding-block:48px}.eef-connection-mark{margin-top:26px;gap:15px}body .focus-faq{grid-template-columns:1fr;padding-block:48px;gap:26px}.focus-faq-heading{position:static}body .focus-faq summary{font-size:18px;gap:10px;grid-template-columns:22px minmax(0,1fr) 18px}body .focus-faq details p{padding-left:32px;padding-right:0}body .focus-faq details>a{margin-left:32px}}
body .eef-connection-mark{display:block;font-family:var(--heading);font-size:25px;line-height:1.4;margin:32px 0 0}
.eef-connection-mark>span{display:block;margin-top:8px;font-family:var(--body);font-size:13px;color:#62596b}
body .eef-connection .eef-other-collaborations{margin-top:30px;clear:both}
[data-network-status]{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* Portrait first: the interactive explanation belongs to the page, not a dashboard card. */
.studio-interactive .hero-person{display:block;background:transparent;border-radius:64px 4px 0 0;overflow:visible}
.studio-interactive .studio-photo{height:clamp(310px,28vw,410px);border-radius:64px 4px 4px 4px}
.studio-interactive .studio-photo img{object-position:center 30%}
.studio-interactive .hero-person figcaption{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:22px;padding:20px 0 22px;border-bottom:1px solid var(--line);background:transparent}
.studio-interactive .studio-name{font-size:17px;line-height:1.3;flex:1}
.studio-interactive .studio-name strong{font-family:var(--body);font-size:13px;font-weight:500}
.studio-interactive .studio-quote{border:0;border-left:1px solid var(--orange);padding:0 0 0 20px;font-size:14px;max-width:240px;flex:1.1}
.studio-interactive .studio-arc{inset:-18px -20px 42% 38%}
.hero-network{background:transparent;border:0;padding:20px 0 0;border-radius:0}
.hero-network>.eyebrow{margin-bottom:9px;font-size:9px}
.hero-network-controls{margin-bottom:12px}
.hero-network-controls button{font-size:12px;padding:8px 5px 10px;min-height:40px}
.network-perspectives{font-size:10px;gap:10px}
.network-perspectives span{border:0;padding:4px 0;font-weight:500}
.hero-network-map svg{height:21px;opacity:.75}
.network-reading h2{font-size:23px;line-height:1.2;margin:8px 0 8px}
.network-reading p{font-size:14px;line-height:1.6;max-width:58ch}
.network-ready .network-reading{min-height:92px}
.network-example-note{margin-top:12px;font-size:9px}
@media(max-width:1100px) and (min-width:761px){.studio-interactive .studio-photo{height:330px}.studio-interactive .hero-person figcaption{padding:18px 0}.studio-interactive .studio-quote{font-size:12px;padding-left:14px}.network-ready .network-reading{min-height:118px}}
@media(max-width:760px){.studio-interactive .studio-photo{height:360px}.studio-interactive .hero-person figcaption{padding:18px 0;gap:15px;display:flex}.studio-interactive .studio-quote{padding-left:14px;font-size:12px}.studio-interactive .studio-name{font-size:17px}.studio-interactive .studio-name strong{font-size:12px}.hero-network{padding:20px 0 0}.network-ready .network-reading{min-height:116px}}
@media(max-width:360px){.studio-interactive .studio-photo{height:310px}.studio-interactive .hero-person figcaption{display:block}.studio-interactive .studio-quote{display:block;max-width:none;border:0;padding:0;margin-top:13px}.network-ready .network-reading{min-height:137px}}
/* Chosen direction: a spacious human opening; exploration immediately afterwards. */
body .studio-hero{grid-template-columns:1.08fr 1fr;gap:6%;padding-block:64px 60px}
.studio-interactive .studio-photo{height:clamp(460px,39vw,590px);border-radius:100px 5px 5px 5px}
.studio-interactive .studio-photo img{object-position:center 35%}
.studio-interactive .hero-person figcaption{border:0;padding-top:22px;padding-bottom:0}
.studio-interactive .studio-name{overflow-wrap:normal;word-break:normal}
.studio-interactive .studio-name strong{font-size:13px;white-space:nowrap}
.studio-interactive .studio-arc{inset:-22px -20px 22% 48%;border-width:1px}
body .hero-method{display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:center;padding-block:55px 60px;background:white;border-top:1px solid var(--line)}
.hero-method-intro .eyebrow{font-size:10px;color:var(--purple);margin-bottom:18px}
.hero-method-intro h2{font-size:clamp(28px,3vw,42px);line-height:1.15;color:var(--purple);max-width:20ch;margin-bottom:20px}
.hero-method-intro p{font-size:16px;line-height:1.7;max-width:49ch;color:#51495a;margin-bottom:22px}
.hero-method-intro>span{font-size:12px;color:var(--purple)}
.hero-method .hero-network{padding:0}
.hero-method .hero-network-controls button{font-size:15px;padding:12px 8px;min-height:48px}
.hero-method .network-perspectives{font-size:12px;margin-top:24px}
.hero-method .hero-network-map svg{height:36px}
.hero-method .network-reading h2{font-size:26px}
.hero-method .network-reading p{font-size:16px}
.hero-method .network-ready .network-reading{min-height:126px}
.hero-method .network-example-note{font-size:11px;margin-top:20px}
@media(max-width:1000px) and (min-width:761px){.studio-interactive .studio-photo{height:440px}.studio-interactive .hero-person figcaption{display:block}.studio-interactive .studio-quote{display:block;max-width:none;border:0;margin-top:15px;padding:0}.hero-method .hero-network-controls button{font-size:13px}.hero-method .network-ready .network-reading{min-height:165px}}
@media(max-width:760px){body .studio-hero{grid-template-columns:1fr;padding-block:38px 42px}.studio-interactive .studio-photo{height:430px;border-top-left-radius:80px}.studio-interactive .hero-person figcaption{display:block;padding-top:18px}.studio-interactive .studio-name,.studio-interactive .studio-name strong{font-size:15px;display:inline;font-family:var(--body);font-weight:600;white-space:normal}.studio-interactive .studio-quote{display:block;max-width:none;margin-top:10px;border:0;padding:0;font-size:13px}body .hero-method{grid-template-columns:1fr;padding-block:42px;gap:25px}.hero-method-intro h2{font-size:32px}.hero-method-intro>span{display:none}.hero-method-intro p{margin-bottom:0}.hero-method .hero-network-controls button{font-size:13px}.hero-method .network-reading h2{font-size:25px}.hero-method .network-ready .network-reading{min-height:152px}}
@media(max-width:360px){.studio-interactive .studio-photo{height:350px}.hero-method .network-perspectives{font-size:10px}.hero-method .network-ready .network-reading{min-height:175px}}
body .focus-case .case-service{display:block;font-family:var(--body);font-size:13px;line-height:1.5;font-weight:500;margin-bottom:6px}
body .focus-case summary strong{font-size:clamp(18px,1.65vw,24px);line-height:1.25}
body .focus-case-body h3{font-size:23px;line-height:1.25}
body .focus-case summary{padding:22px}
@media(max-width:760px){body .focus-case summary{padding:19px 15px}body .focus-case .case-service{font-size:11px}body .focus-case-body h3{font-size:21px}}
body .studio-hero h1 em{background:var(--orange);color:var(--purple);display:inline-block;padding:.04em .13em .1em;margin-top:.06em;border-radius:2px 20px 2px 2px;white-space:normal}
body .studio-hero h1 em:after{display:none}
.studio-interactive .studio-photo{height:clamp(460px,40vw,580px)}
.studio-interactive .studio-photo img{object-position:center 28%}
body .focus-personal{align-items:center;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:7%;padding-block:80px}
body .focus-personal figure{min-width:0}
body .focus-personal img{height:490px;max-height:none;object-fit:cover;object-position:60% center}
body .focus-personal h2{font-size:clamp(32px,3.2vw,48px);line-height:1.16;margin:0 0 28px;max-width:22ch;color:var(--purple)}
body .focus-personal p{font-size:17px;line-height:1.75;max-width:52ch;margin-bottom:22px}
body .focus-personal .eyebrow{font-size:11px;margin-bottom:24px}
.keep-name{white-space:nowrap}
body .eef-connection-mark>span{font-size:13px;color:#62596b;font-family:var(--body);line-height:1.6}
body .fixed-price{display:grid;grid-template-columns:.9fr 1.1fr;gap:7%;align-items:center;padding-block:48px;background:var(--brand-tint);border-top:3px solid var(--orange);color:var(--purple)}
.fixed-price .eyebrow{font-size:10px;margin-bottom:18px}
.fixed-price h2{font-size:clamp(28px,3.2vw,44px);line-height:1.15;color:var(--purple)}
.fixed-price p{font-size:16px;line-height:1.7;max-width:57ch}
.fixed-price .text-link{font-size:14px}
@media(max-width:760px){body .studio-hero h1{font-size:clamp(40px,10vw,65px)}.studio-interactive .studio-photo{height:460px}body .focus-personal{grid-template-columns:1fr;padding-block:48px;gap:28px}body .focus-personal img{height:290px}body .focus-personal h2{font-size:34px;margin-bottom:24px}body .focus-personal p{font-size:16px;line-height:1.75}body .fixed-price{grid-template-columns:1fr;padding-block:38px;gap:26px}}
@media(max-width:360px){.studio-interactive .studio-photo{height:380px}body .studio-hero h1{font-size:38px}}

/* Portrait and caption share one left edge and one quiet reading order. */
body .studio-interactive .studio-photo{height:auto;aspect-ratio:4 / 5;max-height:none}
body .studio-interactive .studio-photo img{height:100%;object-fit:cover;object-position:center top}
body .studio-interactive .hero-person figcaption{display:block;padding:20px 0 0}
body .studio-interactive .studio-name{display:block;font:600 17px/1.5 var(--body);white-space:normal}
body .studio-interactive .studio-quote{display:block;border:0;padding:7px 0 0;margin:0;max-width:none;font:400 16px/1.55 var(--body)}
body .focus-invitation{padding:0;grid-template-columns:1fr 1fr}
body .focus-invitation h2{max-width:17ch;margin-bottom:22px}
body .focus-invitation p:not(.eyebrow){max-width:40ch}
body .eef-connection-mark>span{font-size:16px}
@media(max-width:760px){body .focus-invitation{grid-template-columns:1fr}body .studio-interactive .studio-photo{aspect-ratio:4 / 5}body .studio-interactive .studio-name{font-size:16px}}
/* Keep the invitation on the same outer grid without the global section inset. */
body>main>section.focus-invitation{max-width:none;grid-template-columns:1fr 1fr}
body .focus-invitation figure{position:relative;min-height:490px}
body .focus-invitation figure img{position:absolute;inset:0;aspect-ratio:auto}
body .studio-interactive .studio-photo{height:clamp(460px,39vw,640px);aspect-ratio:auto}
@media(max-width:760px){
 body>main>section.focus-invitation{grid-template-columns:1fr}
 body .focus-invitation figure{min-height:0;aspect-ratio:1}
 body .studio-interactive .studio-photo{height:auto;aspect-ratio:4 / 5}
}

/* A composed opening: copy and portrait sit together, with quiet depth. */
body .studio-hero{grid-template-columns:minmax(0,600px) minmax(0,500px);justify-content:center;align-items:center;gap:clamp(32px,4vw,64px);padding-block:48px 58px}
body .studio-copy{max-width:none}
body .studio-portrait{width:100%;max-width:500px;justify-self:start;padding:0;perspective:1200px}
body .studio-interactive .studio-photo{height:550px;aspect-ratio:auto;border-radius:100px 8px 80px 8px;box-shadow:0 20px 38px #43235b13;transform:rotate(1deg)}
body .studio-interactive .studio-photo img{object-position:center top}
body .studio-interactive .studio-arc{inset:14px -18px 20% 40%;transform:rotate(12deg)}
@keyframes portrait-breathe{0%,100%{transform:translateY(0) rotate(1deg)}50%{transform:translateY(-6px) rotate(.2deg)}}
@media(prefers-reduced-motion:no-preference){body .studio-interactive .studio-photo{animation:portrait-breathe 9s ease-in-out 2}body .studio-interactive .studio-arc{animation:portrait-breathe 12s ease-in-out 2}}
@media(max-width:1100px) and (min-width:761px){body .studio-hero{gap:36px;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}body .studio-interactive .studio-photo{height:470px}}
@media(max-width:760px){body .studio-hero{grid-template-columns:1fr;gap:30px;padding-block:34px}body .studio-portrait{justify-self:center;max-width:420px;width:96%}body .studio-interactive .studio-photo{height:auto;aspect-ratio:4/5;border-radius:75px 6px 60px 6px}}