/* Real project material, composed for this portfolio. */
.has-work-emergence .work-body {
  transform:translate3d(0,var(--work-offset,0px),0) scale(var(--work-scale,.72));
  transform-origin:50% var(--work-pivot,220px);
  pointer-events:var(--work-input,none);
}
/* One viewport plane during the brain-to-gallery handoff. Reserving the
   original section height keeps native document scroll completely unchanged. */
.has-work-emergence .reel-work.is-work-floating{height:var(--work-section-height);box-sizing:border-box}
.has-work-emergence .is-work-floating .work-body{position:fixed;top:var(--work-inset);left:0;right:0;will-change:transform}
.has-work-emergence .is-work-floating .work-body:has(:focus-visible){position:relative;inset:auto}
.has-work-emergence .work-art {opacity:var(--birth-image,var(--work-alpha,0))}
.has-work-emergence .work-heading,.has-work-emergence .work-card-caption {opacity:var(--work-meta,0)}
.hands.is-traversing {z-index:3}
/* Keyboard navigation must reveal a focused project. A pointer click on the
   preview control must not pin the gallery open when scrolling back up. */
.work-body:has(:focus-visible) {opacity:1;clip-path:none;transform:none;mask-image:none;-webkit-mask-image:none;pointer-events:auto;--work-meta:1}
.has-work-emergence .work-body:has(:focus-visible) .work-art {opacity:1}
/* Pace comes from real document space. Wheel, trackpad, touch, keys and
   scrollbar all retain native behaviour, with no scene gates or catch-up. */
.hold {height:300vh;height:300svh}
.hold__snap:nth-of-type(1) {top:100vh;top:100svh}
.hold__snap:nth-of-type(2) {top:200vh;top:200svh}
.work-art {container-type:inline-size}
.work-art > img {position:absolute}
.work-art .art-name {position:absolute;z-index:1;font-size:10cqw;line-height:.88;letter-spacing:-.065em;font-weight:500}
.work-art .art-note {position:absolute;font-size:3cqw;letter-spacing:.08em}
.work-art .art-window {object-fit:cover;object-position:top;box-shadow:0 12px 35px #0005}
.work-art .art-phone {width:27%;height:83%;object-fit:cover;object-position:top;border-radius:6px;box-shadow:0 10px 25px #0004}
.art-galaxy {background:#170f2c}
.art-galaxy .art-backdrop {object-position:center;filter:brightness(.75)}
.art-galaxy .art-name {left:7%;top:10%;color:#ece1f4;font-weight:400;font-size:14cqw}
.art-galaxy .art-window {width:70%;height:70%;right:-5%;bottom:-12%;border:1px solid #e8d5ff30}
.art-maison-m {background:#c7c4ac}
.art-maison-m .art-name {left:6%;top:11%;font-size:9cqw;color:#303a26;max-width:24%;line-height:1}
.art-maison-m .phone-one {left:34%;top:-8%}
.art-maison-m .phone-two {left:66%;bottom:-9%}
.art-swisstapgo {background:#e3e8ec}
.art-swisstapgo .art-name {left:6%;top:10%;font-size:12cqw;color:#143247}
.art-swisstapgo .art-object {width:48%;height:100%;right:0;object-fit:cover;object-position:center}
.art-swisstapgo .art-note {left:6%;bottom:9%;color:#345c74}
.art-loredana {background:#bd8683}
.art-loredana .art-full {object-position:center}
.art-xela {background:#e6d9cd}
.art-xela .art-macro {position:absolute;inset:0 44% 0 0;overflow:hidden}
.art-xela .art-macro img {display:block;width:120%;height:auto;max-width:none;transform:translate(-6%,-36%)}
.art-xela .art-phone {width:29%;height:91%;right:7%;top:41%;box-shadow:0 12px 26px #69432f33}
.art-xela .art-name {font-size:9cqw;top:10%;right:7%;width:29%;color:#734b34}
.art-brodard {background:#bfcac5}
.art-brodard .art-window {left:6%;top:11%;width:75%;height:82%;object-position:left top}
.art-brodard .art-phone {right:5%;top:33%;width:24%;height:82%;box-shadow:0 8px 24px #1d342950}
.art-santeria .art-full {object-position:center;object-fit:cover}
.art-murano {background:#faf9f5}
.art-murano .art-full {object-fit:cover;object-position:50% 45%;width:105%;height:105%;left:-2.5%;top:-2.5%}
.art-bds {background:#d7e8e5}
.art-bds .art-name {left:6%;top:12%;font-size:12cqw;color:#063b39;max-width:49%}
.art-bds .art-phone {right:8%;top:12%;width:31%;height:104%;border-radius:2px;box-shadow:0 10px 25px #0a4d3f25}
.work-film {z-index:2}
.work-open {z-index:3}
.work-card-link .art-window,.work-card-link .art-phone,.work-card-link .art-object {transition:translate .65s cubic-bezier(.2,.7,.2,1)}
.work-card-link:hover .art-window,.work-card-link:hover .art-phone,.work-card-link:focus-visible .art-phone {translate:0 -5px}
.work-card-link:hover .art-object {translate:-5px 0}

/* A working table: choose a discipline and inspect an actual piece of work. */
.studio {position:relative;padding-top:100px;padding-bottom:130px;scroll-margin-top:36px}
.studio-anchor {position:absolute;top:0;scroll-margin-top:36px}
.studio-intro {display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:55px}
.studio-intro h2 {font-size:clamp(40px,5.3vw,76px);letter-spacing:-.06em;line-height:1.03;font-weight:450;max-width:730px;margin:0}
.studio-intro>p {max-width:230px;font-size:14px;line-height:1.6;color:var(--text-soft);margin:0 0 5px}
.studio-choices {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px;border-bottom:1px solid var(--rule);margin-bottom:35px}
.studio:not(.is-interactive) .studio-choices {display:none}
.studio-choice {position:relative;display:flex;flex-direction:column;gap:13px;border:0;background:none;color:var(--text-muted);text-align:left;padding:0 0 26px;min-height:100px}
.studio-choice>span {font-size:clamp(19px,2vw,29px);line-height:1.15;letter-spacing:-.04em}
.studio-choice>small {font-size:11px;font-weight:400;line-height:1.5;max-width:220px;color:var(--text-muted)}
.studio-choice::after {content:"";position:absolute;bottom:-1px;left:0;right:0;height:2px;background:var(--primary-soft);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.studio-choice:hover,.studio-choice[aria-selected=true] {color:var(--text)}
.studio-choice[aria-selected=true]::after {transform:scaleX(1)}
.studio-proof {display:grid;grid-template-columns:minmax(0,2.35fr) minmax(200px,1fr);gap:42px;align-items:center;margin-bottom:60px}
.studio.is-interactive .studio-proof {margin-bottom:0}
.studio.is-interactive .studio-proof:not([hidden]) {animation:proof-arrive .42s both}
.studio-proofs {min-height:470px}
.proof-caption h3 {font-size:clamp(24px,2.5vw,37px);line-height:1.12;letter-spacing:-.045em;font-weight:400;margin:0 0 22px}
.proof-caption>p {color:var(--text-soft);font-size:14px;line-height:1.7;margin:0 0 32px}
.proof-links {display:flex;flex-wrap:wrap;gap:13px 22px;font-size:12px;color:var(--primary-soft)}
.proof-links a {padding:6px 0;border-bottom:1px solid #8db8ff55}
.studio-web-composition {position:relative;aspect-ratio:1.63;background:#29131a;overflow:hidden}
.studio-book {position:absolute;left:-8%;top:3%;width:91%;height:100%}
.studio-book img {width:100%;height:100%;display:block;object-fit:cover;object-position:center}
.studio-phone {position:absolute;width:23%;height:91%;right:5%;top:18%;box-shadow:0 15px 40px #0008;border-radius:8px;overflow:hidden}
.studio-phone img {width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.studio-proof .project-media {width:100%;aspect-ratio:1.63}
.media-loredana .film-website {object-fit:contain;object-position:center;background:#26141d}
.studio-results {background:#e4e8e4;color:#12201e;padding:30px 36px}
.results-clients {font-size:12px;letter-spacing:.03em;margin:0 0 12px}
.result-total {display:flex;align-items:flex-end;gap:25px}
.result-total strong {font-weight:450;font-size:clamp(92px,11vw,160px);line-height:.9;letter-spacing:-.09em}
.result-total strong span {color:#64847b}
.result-total p {font-size:14px;line-height:1.4;margin:0 0 10px;max-width:110px}
.result-clicks {margin:24px 0 28px;font-size:12px;color:#586962}
.result-clicks b {font-size:24px;letter-spacing:-.045em;color:#1f4139;font-weight:500;margin-right:8px}
.result-accounts {display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #293e302b;padding-top:18px;gap:25px}
.result-accounts a {display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center;font-size:12px}
.result-accounts b {font-size:30px;font-weight:400;letter-spacing:-.05em;grid-row:span 2}
.result-accounts small {font-size:10px;color:#5a6c64}
.studio-results .source-note {color:#52665d;border-color:#293e302b;margin-top:20px;font-size:11px}
.studio-results .source-note summary {padding:12px 0 0}
.studio-results .source-note>p {padding-top:14px;margin-bottom:0}
.studio-system {background:radial-gradient(ellipse at 50% 50%,#1c395960,transparent 70%);min-height:460px;display:grid;align-items:center}
.studio-system .connection-map {margin:0}
.studio-system .connection-svg {overflow:visible}
.studio-system .network-label {font-size:10px}
.studio-system .connection-brand {font-size:39px}
.studio-system .connection-core {stroke:#8db8ff80}

/* Different openings for different kinds of work, with shared navigation. */
.case-opening {padding-top:125px}
.case-opening .back {margin-bottom:36px}
.case-lead {display:grid;grid-template-columns:1fr 1.15fr;align-items:center;gap:55px}
.case-title {min-width:0}
.case-location {font-size:11px;color:var(--text-muted);margin:0 0 25px}
.case-opening h1 {font-size:clamp(48px,6.4vw,100px);line-height:.95;margin:0 0 26px;letter-spacing:-.07em;overflow-wrap:break-word}
.case-opening h2 {font-size:clamp(20px,2.2vw,32px);font-weight:400;line-height:1.25;letter-spacing:-.035em;max-width:520px;margin:0;color:var(--text-soft)}
.case-art {position:relative;aspect-ratio:1.1}
.case-art .work-open {display:none}
.case-description {max-width:650px;margin:40px 0 0 auto}
.case-description>p {font-size:16px;line-height:1.8;color:var(--text-soft);margin:0 0 20px}
.opening-galaxy .case-lead {display:block;position:relative}
.opening-galaxy .case-title {margin-bottom:30px}
.opening-galaxy h1 {font-size:clamp(85px,14vw,210px);font-weight:400;margin-bottom:17px}
.opening-galaxy h2 {max-width:none;font-size:21px}
.opening-galaxy .project-media {aspect-ratio:2.2}
.opening-galaxy .case-description {margin-right:auto;margin-left:0;max-width:720px}
.opening-loredana .case-lead {grid-template-columns:.9fr 1.1fr;gap:50px}
.opening-loredana .project-media {aspect-ratio:1.12}
.opening-loredana h1 {font-size:clamp(46px,6vw,87px);color:#f0c4c2}
.opening-loredana h2 {font-size:26px}
.opening-maison-m .case-lead,.opening-xela .case-lead {grid-template-columns:1.18fr 1fr}
.opening-maison-m .case-stage,.opening-xela .case-stage {grid-column:1;grid-row:1}
.opening-maison-m .case-title,.opening-xela .case-title {grid-column:2;grid-row:1}
.opening-maison-m .case-art {aspect-ratio:.96}
.opening-maison-m .art-phone {width:31%;height:79%}
.opening-maison-m .art-name {font-size:7cqw;left:7%;top:4%;max-width:none}
.opening-maison-m .phone-one {left:14%;top:17%}
.opening-maison-m .phone-two {left:55%;bottom:-2%}
.opening-swisstapgo .case-art {aspect-ratio:.98}
.opening-swisstapgo .art-name {font-size:12cqw;left:7%;top:9%}
.opening-swisstapgo .art-object {height:100%;width:55%}
.opening-swisstapgo h1 {font-size:clamp(50px,7vw,103px)}
.opening-santeria .case-lead {display:block}
.opening-santeria .case-title {display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:0 50px;margin-bottom:35px}
.opening-santeria .case-location {grid-column:1/-1}
.opening-santeria h1 {margin:0;font-size:clamp(60px,8vw,120px)}
.opening-santeria h2 {max-width:420px;padding-bottom:6px}
.opening-santeria .case-art {aspect-ratio:1.9}
.opening-santeria .art-full {object-fit:contain;background:#4f1925}
.opening-murano .case-lead {grid-template-columns:.8fr 1.2fr}
.opening-murano .case-art {aspect-ratio:1.17}
.opening-murano .art-full {object-position:50% 45%}
.opening-bds .case-art {aspect-ratio:1.08}
.opening-brodard .case-art {aspect-ratio:1.15}

.contact-studio {padding-top:75px;padding-bottom:0;overflow:hidden}
.contact-question {display:flex;justify-content:space-between;gap:30px;margin-bottom:55px;color:var(--text-soft);font-size:14px}
.contact-question p {margin:0}
.contact-question>span {font-size:12px;color:var(--text-muted)}
.contact-studio h2 {font-size:clamp(66px,11vw,165px);font-weight:450;line-height:1;letter-spacing:-.07em}
.contact-studio h2 a {display:flex;align-items:center;justify-content:space-between;gap:30px}
.contact-studio h2 a>span {font-size:.7em;color:var(--primary-soft);font-weight:300;transition:transform .3s}
.contact-studio h2 a:hover>span {transform:translate(8px,-8px)}
.contact-address {display:inline-block;font-size:16px;color:var(--text-soft);margin-top:28px;padding-bottom:6px;border-bottom:1px solid var(--rule)}
.contact-signature {font-size:clamp(100px,23.5vw,350px);letter-spacing:-.095em;line-height:.8;font-weight:500;margin:110px 0 -20px -1.4%;color:#8bb0cf24;user-select:none}
@keyframes proof-arrive {from {opacity:.3;transform:translateY(8px)} to {opacity:1;transform:none}}

@media(max-width:1050px) {
  .studio-proof {grid-template-columns:minmax(0,1.8fr) minmax(170px,1fr);gap:27px}
  .studio-system {min-height:355px}
  .result-total strong {font-size:110px}.studio-results {padding:26px}
  .studio-choices {gap:16px}.studio-choice>span {font-size:23px}
  .case-lead,.opening-loredana .case-lead {gap:32px}
}
@media(max-width:760px) {
  .studio {padding-top:65px;padding-bottom:80px}
  .studio-intro {display:block;margin-bottom:35px}.studio-intro h2 {font-size:44px;max-width:490px}
  .studio-intro>p {max-width:none;margin-top:22px;font-size:13px}
  .studio-choices {grid-template-columns:repeat(3,minmax(0,1fr));gap:0 16px;border:0;margin-bottom:25px}
  .studio-choice {min-height:65px;padding:14px 0;border-bottom:1px solid var(--rule);justify-content:center}
  .studio-choice>span {font-size:16px;line-height:1.25}.studio-choice>small {display:none}
  .studio-proof {display:block}.studio-proofs {min-height:0}
  .studio-web-composition,.studio-proof .project-media {aspect-ratio:1.3}
  .studio-book {left:-15%;width:110%;top:0}
  .studio-phone {width:25%;right:5%;top:27%;height:91%}
  .proof-caption {padding-top:25px;max-width:450px}.proof-caption h3 {font-size:28px;margin-bottom:17px}
  .proof-caption>p {font-size:13px;margin-bottom:18px}
  .studio-results {padding:23px}.result-total {gap:22px}.result-total strong {font-size:106px}
  .result-total p {font-size:12px}.result-clicks {font-size:11px;margin:20px 0 23px}.result-clicks b {font-size:22px}
  .result-accounts {gap:15px}.result-accounts a {font-size:10px}.result-accounts b {font-size:26px}.result-accounts small {font-size:9px}
  .studio-system {min-height:265px}.studio-system .network-label {font-size:8px;max-width:83px}
  .case-opening {padding-top:112px}.case-opening .back {margin-bottom:32px}
  .case-lead,.opening-loredana .case-lead,.opening-maison-m .case-lead,.opening-xela .case-lead,.opening-murano .case-lead {display:flex;flex-direction:column;align-items:stretch;gap:30px}
  .case-opening h1 {font-size:57px;margin-bottom:20px}.case-location {font-size:10px;margin-bottom:22px}
  .case-opening h2,.opening-loredana h2 {font-size:23px}
  .case-art {aspect-ratio:1.1}.case-description {margin:27px 0 0;max-width:none}.case-description>p {font-size:14px;line-height:1.75}
  .opening-galaxy h1 {font-size:100px}.opening-galaxy h2 {font-size:21px}.opening-galaxy .project-media {aspect-ratio:1.3}
  .opening-santeria .case-title {display:block;margin-bottom:0}.opening-santeria h1 {margin-bottom:22px;font-size:60px}
  .opening-santeria .case-art {aspect-ratio:1.23}
  .opening-maison-m .case-art {aspect-ratio:1.08}.opening-xela .case-art {aspect-ratio:1.1}
  .contact-studio {padding-top:48px}.contact-question {margin-bottom:37px;font-size:12px}.contact-question>span {max-width:135px;font-size:10px;text-align:right;line-height:1.5}
  .contact-studio h2 {font-size:clamp(52px,12.8vw,86px)}.contact-address {font-size:14px;margin-top:26px}
  .contact-signature {font-size:25vw;margin-top:75px;margin-bottom:-6px}
}
@media(prefers-reduced-motion:reduce) {
  .has-work-emergence .work-body {opacity:1;clip-path:none;transform:none;-webkit-mask-image:none;mask-image:none;pointer-events:auto;--work-meta:1}
  .studio.is-interactive .studio-proof:not([hidden]) {animation:none}
  .work-card-link:hover .art-window,.work-card-link:hover .art-phone,.work-card-link:focus-visible .art-phone,.work-card-link:hover .art-object {translate:none}
}

/* Scene copy arrives through opacity, with no pop, scaling or elastic slide. */
html {overscroll-behavior-y:none}
.reach__copy,.hold__reveal,.hold__texts .hold__text {transform:none;filter:none;transition:opacity .38s linear}
.hold__visual.is-formed~.hold__detail,.hold__texts .hold__text.is-active {transition-delay:0s}
.has-work-emergence .hold__visual.is-formed~.hold__reveal {transition:none}
.hold__detail::before {transition:top .28s linear}
/* Keep pinned scene copy clear of the persistent enquiry control. */
@media(max-width:760px){
  .hold__stage{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  .hero__scroll{bottom:calc(92px + env(safe-area-inset-bottom,0px))}
}
/* Short landscape phones need the artwork and copy beside each other. */
@media(max-width:960px) and (max-height:580px) and (orientation:landscape){
  .hold__stage{grid-template-rows:1fr;padding:28px 22px 100px;row-gap:0}
  .hold__stage>*{grid-area:1/1}
  .hold__intro{align-self:start;max-width:32%}
  .hold__title{font-size:22px}
  .hold__eyebrow{font-size:8px}
  .hold__visual{align-self:center;min-width:0;width:min(34vw,calc((100svh - 145px)*.775))}
  .hold__detail{align-self:end;max-width:29%;padding-left:13px}
  .hold__text{font-size:12px;line-height:1.45}
  .hold__work-link{font-size:11px;margin-top:12px}
}