/* Motion and editorial revision. Main type styling is intentionally retained. */
.ink-art svg svg{overflow:hidden}
.process-head .hand-note.ink-art>svg{filter:none}
.detail-video.vertical-video{aspect-ratio:9/16;height:min(70vh,720px);max-height:70vh;object-fit:contain}
.brand,.brand img{width:145px}.brand img{height:58px;object-fit:contain}.footer-brand img{width:110px;height:auto}.hand-note.ink-art{font-family:inherit;transform:rotate(-4deg);display:block;width:min(650px,70%);max-width:none;font-size:0;line-height:1;margin-top:35px}.ink-art svg{display:block;width:100%;height:auto;overflow:visible}.ink-translation{display:block;font:12px/1.5 Arial,sans-serif;letter-spacing:0;margin-top:13px;opacity:.75}.intro>.hand-note.ink-art{margin:45px 0 0 3%;width:min(670px,79%)}.process-head{align-items:center}.process-head .hand-note.ink-art{width:min(470px,57%);margin:0;transform:rotate(-3deg)}.process-head .ink-art svg{filter:brightness(0) invert(88%) sepia(72%) saturate(1619%) hue-rotate(353deg) brightness(103%) contrast(106%)}.process-head .ink-translation{color:#e9e9db;text-align:right}.project-grid{gap:76px 42px}.project-visual{isolation:isolate;transform-origin:50% 80%;will-change:auto}.motion-image:not(.is-revealed){opacity:0;clip-path:polygon(3% 12%,100% 0,95% 100%,0 91%);transform:translateY(40px) scale(.94) skewY(3deg)}.motion-image.is-revealed{animation:image-unfold 1.65s cubic-bezier(.17,.75,.2,1) both}.depth-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:0;transition:opacity .35s}.depth-ready .depth-canvas{opacity:1}.project-visual .project-index,.project-visual .project-play{z-index:3}.depth-ready>img{opacity:0!important}.project-button:hover .depth-ready>img{transform:none;filter:none}.project-visual:after{content:'';position:absolute;inset:0;border:1px solid #ffffff0c;border-radius:inherit;pointer-events:none;z-index:4}.project-title{font-size:clamp(23px,2.5vw,38px)}.portrait{isolation:isolate}.portrait-annotations{position:absolute;inset:0;opacity:0}.portrait.is-revealed:not(.depth-ready) .portrait-annotations{animation:portrait-ink 3s 1s both}.portrait.depth-ready .idea-spark{display:none}.portrait .depth-canvas{z-index:2}.portrait:not(.depth-ready)[aria-pressed=true] .portrait-alt{z-index:3;opacity:1}.portrait-caption{line-height:1.6}.project-dialog{width:min(1120px,94vw)}.case-stage-bar{display:flex;align-items:center;gap:12px;padding:18px 30px;background:#242720;color:#efeee7}.case-stage-bar>span{font:11px 'Courier New',monospace;margin-right:auto}.case-stage{font:11px/1.3 Arial,sans-serif;border:1px solid #777e70;border-radius:25px;padding:12px 17px;color:#fff;transition:background .2s}.case-stage[aria-pressed=true]{background:#ffdc00;border-color:#ffdc00;color:#222}.stage-hint{padding:13px 30px;font-size:11px;color:#73796b;background:#e8e9e0}.case-breakdown{padding:24px 0 10px}.case-breakdown h3{font-size:11px;margin:0 0 17px}.burn-compare{position:relative;overflow:hidden;aspect-ratio:16/9;border-radius:6px;--cut:50%}.burn-compare>img{position:absolute;width:100%;height:100%;object-fit:cover}.burn-compare .burn-after{clip-path:inset(0 0 0 var(--cut))}.burn-divider{position:absolute;left:var(--cut);top:0;bottom:0;width:1px;background:#ffdc00;pointer-events:none}.burn-divider:after{content:'↔';position:absolute;top:50%;left:0;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;background:#ffdc00;display:grid;place-items:center;font-size:20px}.burn-compare input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:ew-resize}.burn-compare:focus-within{outline:3px solid #234ddb;outline-offset:4px}.burn-label{position:absolute;z-index:1;top:15px;color:#fff;background:#111a;padding:6px 9px;font:10px 'Courier New',monospace;pointer-events:none}.burn-label.before{left:15px}.burn-label.after{right:15px}.case-source-links{display:flex;flex-wrap:wrap;gap:15px;margin-top:18px;font-size:11px;text-decoration:underline;text-underline-offset:3px}.detail-video{max-height:58vh}.case-source-links a{padding:8px 0}
@keyframes image-unfold{0%{opacity:0;clip-path:polygon(3% 12%,100% 0,95% 100%,0 91%);transform:translateY(40px) scale(.94) skewY(3deg);border-radius:30px 8px 32px 5px}45%{opacity:1;clip-path:polygon(0 1%,100% 0,100% 99%,0 100%)}100%{opacity:1;clip-path:polygon(0 0,100% 0,100% 100%,0 100%);transform:none;border-radius:9px}}
@keyframes portrait-ink{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0)}}
@media(hover:hover){.portrait:not(.depth-ready):hover .portrait-alt{z-index:3;opacity:1}}
@media(max-width:650px){.brand,.brand img{width:102px}.brand img{height:45px}.header{padding:0 5%;gap:6px}.header-controls{gap:5px}.languages{margin-right:0}.languages button{padding:10px 5px}.menu-toggle{min-width:78px;padding:12px}.intro>.hand-note.ink-art{width:100%;margin:36px 0 12px;transform:rotate(-4deg)}.process-head{display:block}.process-head .hand-note.ink-art{width:93%;margin:30px 0 8px}.ink-translation{font-size:11px}.process-head .ink-translation{text-align:left}.project-grid{gap:42px}.project-title{font-size:29px}.case-stage-bar{padding:16px 18px;gap:8px;flex-wrap:wrap}.case-stage-bar>span{width:100%;font-size:10px;margin-bottom:4px}.case-stage{font-size:10px;padding:10px 12px;flex:1}.stage-hint{padding:12px 20px;font-size:10px}.burn-label{font-size:8px;top:9px;padding:5px}.burn-label.before{left:9px}.burn-label.after{right:9px}.burn-divider:after{width:30px;height:30px}.project-dialog{max-height:93dvh}.footer-brand img{width:100px}.detail-video{max-height:43vh}.project-visual{aspect-ratio:1.4}}
@media(prefers-reduced-motion:reduce){.motion-image,.motion-image:not(.is-revealed){opacity:1;clip-path:none;transform:none;animation:none}.portrait-annotations{opacity:1!important;animation:none!important}.depth-canvas{display:none}.project-visual img{transform:none!important;filter:none!important}}

/* Larger, more legible editorial typography. */
.serif{font-family:Baskerville,'Palatino Linotype','Book Antiqua',Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.035em}
.mono,.eyebrow,.section-marker{font-size:12px;line-height:1.5;letter-spacing:.045em}
.header-note,.languages button,.pill{font-size:14px}
.hero:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 42%,rgba(16,14,11,.46) 68%,rgba(16,14,11,.7));}
.hero-copy{z-index:1;margin-left:62%;padding:6% 4% 8% 2%}
.hero h1{font-size:clamp(43px,5.3vw,88px);font-weight:700;letter-spacing:-.055em;line-height:1.02}
.hero-copy .eyebrow{font-size:12px;color:#e2ded2}
.hero-copy p{font-size:clamp(17px,1.45vw,23px);max-width:350px;color:#f1eee7}
.hero-bottom{z-index:1;font-size:11px}
.intro-detail{margin-top:20px;max-width:430px}.intro-detail p,.approach-top>p{font-size:clamp(18px,1.5vw,23px);line-height:1.55;max-width:440px}
.statement{font-size:clamp(56px,7.2vw,112px);line-height:1.04}
.section-heading h2,.approach h2{font-size:clamp(52px,6.4vw,100px)}
.section-heading p{font-size:18px;max-width:340px}
.text-link{font-size:15px}.project-category{font-size:12px}.project-title{font-size:clamp(29px,3vw,46px);line-height:1.1}.project-role{font-size:15px;line-height:1.5}.project-index{font-size:12px}.projects-foot{font-size:12px}
.service h3{font-size:28px}.service p,.approach-bottom,.studio-copy>p:not(.studio-lead){font-size:16px;line-height:1.65}.process li{font-size:15px}.process li>span{font-size:12px}.portrait-caption,.studio-copy>.eyebrow{font-size:12px}.studio-lead{font-size:23px}.career summary,.career-item{font-size:15px}.career-item span{font-size:13px}
.contact-bottom,.contact-bottom address{font-size:16px}.footer-links,footer .mono{font-size:12px}.cookie-banner strong{font-size:16px}.cookie-banner p,.cookie-banner a,.cookie-actions .pill{font-size:14px}.detail-body p,.legal-dialog p,.legal-dialog li{font-size:16px}.detail-body h3{font-size:12px}.detail-disclaimer{font-size:13px!important}
.headline-line{display:block;overflow:hidden;padding:0 .08em .09em 0;margin-bottom:-.09em}.headline-line-inner{display:block}
.js-motion .headline-animated .headline-line-inner{opacity:0;transform:translate3d(0,105%,0) rotate(2deg);transition:transform .95s cubic-bezier(.2,.7,.2,1),opacity .65s ease;transition-delay:calc(var(--line-index)*120ms)}
.js-motion .headline-animated .headline-line:nth-child(even) .headline-line-inner{transform:translate3d(-4%,70%,0) rotate(-2deg)}
.js-motion .headline-animated.headline-visible .headline-line-inner{opacity:1;transform:none}
.js-motion .project-title{opacity:0;transform:translateY(20px);transition:opacity .7s .13s,transform .8s .13s}
.js-motion .project-title.headline-visible{opacity:1;transform:none}
@media(max-width:1000px) and (min-width:651px){.hero-copy{margin-left:60%;padding:5% 3% 8% 2%}.hero h1{font-size:5.2vw}.hero-copy .eyebrow{font-size:11px}.hero-copy p{font-size:16px}.intro-detail{margin-top:20px}}
@media(max-width:650px){
 .mono,.eyebrow,.section-marker{font-size:11px}.header .languages button,.menu-toggle{font-size:12px}
 .hero:after{background:linear-gradient(transparent 28%,rgba(16,14,11,.3) 39%,#100e0b 58%)}
 .hero-copy{margin-left:0;padding:330px 25px 90px}.hero-copy .eyebrow{font-size:11px}.hero h1{font-size:clamp(43px,11.8vw,58px);max-width:100%}.hero-copy p{font-size:17px;max-width:310px}.hero-copy .pill{font-size:14px}.hero-bottom{font-size:10px}
 .below-hero{font-size:10px}.section-marker{font-size:11px}.statement{font-size:clamp(43px,10vw,64px)}
 .intro-detail{margin:30px 0 0;max-width:100%}.intro-detail p,.approach-top>p{font-size:17px}.section-heading h2,.approach h2{font-size:clamp(44px,10vw,64px)}.section-heading p{font-size:16px}
 .project-category{font-size:11px}.project-title{font-size:clamp(30px,8vw,42px)}.project-role{font-size:15px}.projects-foot{font-size:11px}
 .service h3{font-size:22px}.service p,.approach-bottom,.studio-copy>p:not(.studio-lead){font-size:15px}.process li{font-size:14px}.process li>span,.service .mono{font-size:11px}.portrait-caption,.studio-copy>.eyebrow{font-size:11px}
 .studio-copy h2{font-size:clamp(38px,9vw,52px)}.contact-title{font-size:clamp(52px,12vw,70px)}.contact-bottom,.contact-bottom address{font-size:15px}.footer-links,footer .mono{font-size:11px}.cookie-banner p,.cookie-banner a,.cookie-actions .pill{font-size:13px}.detail-body p,.legal-dialog p{font-size:15px}
}
@media(prefers-reduced-motion:reduce){.js-motion .headline-animated .headline-line-inner,.js-motion .project-title{opacity:1;transform:none;transition:none}}
/* Editorial details and case cards */
.serif{font-family:inherit;font-style:normal;font-weight:inherit;letter-spacing:inherit;color:#c39f00}.approach .serif{color:#fcdf04}.contact .serif{color:#20211f;text-decoration:underline;text-decoration-thickness:.035em;text-underline-offset:.12em}
.hero-copy{margin-left:66%;padding-left:2%;padding-right:3%}.hero .yellow{border-radius:11px;background:#fcdf04;border-color:#fcdf04;color:#171717;font-weight:700;text-transform:uppercase;letter-spacing:.035em}
.case-heading{padding:32px 40px 18px}.case-heading .eyebrow{display:inline-block;border-radius:20px;background:#fcdf04;padding:6px 12px;font-family:Arial,sans-serif;font-weight:700;font-size:11px}.case-heading h2{font-size:clamp(26px,3vw,40px);font-weight:800;line-height:1.05;text-transform:uppercase;margin:15px 0 0;letter-spacing:-.04em}.project-dialog .detail-video{width:calc(100% - 80px);margin:auto;border-radius:10px}.detail-body h3{font:700 13px Arial,sans-serif}.detail-meta{background:#ebdeca;border:0;border-radius:14px;padding:20px 25px;align-self:start}.detail-meta h3{margin-top:8px}.detail-meta p{font-weight:700}.participation-tags{display:flex;flex-wrap:wrap;gap:8px}.participation-tags span{border:1px solid #c9bca6;border-radius:20px;padding:7px 12px;font-size:13px;font-weight:700}.case-stage-bar{margin:18px 40px 0;border-radius:9px}.stage-hint{margin:0 40px}.career-item{display:flex;justify-content:space-between;align-items:center;gap:20px}.career-item img{max-width:90px;max-height:38px;object-fit:contain;animation:logo-in .6s both}.career-item span{display:block}@keyframes logo-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.pen-frame{display:block;overflow:visible;width:100%;height:auto}.pen-frame path,.process-connector path{fill:none;stroke:#fcdf04;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.process{position:relative}.process li{position:relative}.process li:before{content:'';display:block;width:8px;height:8px;border-radius:50%;background:#d6d8c9;margin:-21px 0 14px;position:relative;z-index:1}.process-connector{position:absolute;inset:0;width:100%;height:18px;overflow:visible;pointer-events:none}.process-connector path{stroke:#d6d8c9;stroke-width:1.3}
@media(max-width:650px){.hero-copy{margin-left:0;padding:330px 25px 90px}.case-heading{padding:25px 20px 15px}.project-dialog .detail-video{width:calc(100% - 40px)}.case-stage-bar,.stage-hint{margin-left:20px;margin-right:20px}.process-connector{display:none}}
.process-head .hand-note.ink-art{position:relative;padding:18px 18px 20px}.process-head .pen-frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.process{background:linear-gradient(90deg,#d6d8c9,#d6d8c9) left top / 100% 1px no-repeat}.process li{border-top:0}.portrait.is-revealed:not(.depth-ready) .portrait-annotations{animation:doodles-appear 2s steps(5,end) .4s both}.portrait:not(.depth-ready):hover .portrait-alt{transition:opacity .45s,filter .5s,transform .5s;animation:portrait-focus .65s ease both}@keyframes doodles-appear{from{opacity:0;clip-path:circle(0 at 30% 30%)}50%{opacity:1;clip-path:circle(45% at 60% 25%)}to{opacity:1;clip-path:circle(100% at 50% 50%)}}@keyframes portrait-focus{0%{filter:blur(2px);transform:scale(1.025)}100%{filter:blur(0);transform:scale(1)}}
@media(max-width:650px){.process{background:none}.process li{border-top:1px solid #ffffff40}.process li:before{margin-top:-5px}}
/* Headlines: each line retains its natural height while entering independently. */
.headline-line{display:block;overflow:visible;padding:0;margin:0;line-height:1.12}
.headline-line-inner{display:block;line-height:inherit}
.js-motion .headline-animated .headline-line-inner{transform:translate3d(0,22px,0);transition:transform .9s cubic-bezier(.2,.7,.2,1),opacity .75s ease;transition-delay:calc(var(--line-index)*160ms)}
.js-motion .headline-animated .headline-line:nth-child(even) .headline-line-inner{transform:translate3d(-24px,0,0)}
.js-motion .headline-animated.headline-visible .headline-line-inner{opacity:1;transform:none}
.intro-paragraph{position:relative;isolation:isolate}.intro-paragraph p{position:relative;z-index:1}.paragraph-ink{position:absolute;inset:-12% -8%;width:116%;height:125%;overflow:visible;pointer-events:none;z-index:0}.paragraph-ink path{fill:none;stroke:#234dbd;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;filter:url(#ink-texture)}
@media(prefers-reduced-motion:reduce){.js-motion .headline-animated .headline-line-inner{opacity:1;transform:none;transition:none}}

/* A completed entrance always returns every line to the same left edge. */
.headline-animated .headline-line,.headline-animated .headline-line-inner{margin-left:0;padding-left:0;text-indent:0}
.js-motion .headline-animated.headline-visible .headline-line:nth-child(even) .headline-line-inner,
.js-motion .headline-animated.headline-visible .headline-line:nth-child(odd) .headline-line-inner{opacity:1;transform:translate3d(0,0,0)}
/* The annotation is already present; correction and frame are written in sequence. */
.process-head .hand-note.craft-sequence{width:min(530px,65%);padding:35px 28px 20px;transform:rotate(-3deg);min-height:120px;position:relative}
.craft-base{display:block;color:#fcdf04;font-family:'Segoe Print','Bradley Hand',cursive;font-size:clamp(21px,2.2vw,31px);line-height:1.4;white-space:nowrap}
.craft-target{position:relative;display:inline-block}.craft-strike{position:absolute!important;left:-3%;top:20%;width:106%!important;height:70%!important;overflow:visible;pointer-events:none}.craft-strike path{fill:none;stroke:#fcdf04;stroke-width:2.4;stroke-linecap:round;filter:url(#ink-texture)}
.process-head .craft-sequence .craft-correction{position:absolute;width:62%;right:4%;top:-3%;height:auto;filter:none}.process-head .craft-sequence .pen-frame{inset:0;width:100%;height:100%;filter:none}.craft-sequence .pen-frame path{stroke:#fcdf04;stroke-width:1.8;filter:url(#ink-texture)}
.process-head .craft-sequence .ink-translation{font:13px/1.4 Arial,sans-serif;text-align:left;margin-top:8px}
@media(max-width:650px){.process-head .hand-note.craft-sequence{width:100%;padding:38px 16px 20px;min-height:110px}.craft-base{font-size:clamp(18px,5vw,27px)}.process-head .craft-sequence .craft-correction{width:69%;top:0}}
@media(prefers-reduced-motion:reduce){.craft-strike path,.craft-sequence .pen-frame path{stroke-dashoffset:0!important}}
.process{background:none!important;position:relative;isolation:isolate}.process li{border:0!important;padding-top:28px;position:relative;z-index:1}.process li:before{content:none!important}.process-dot{display:block;position:absolute;top:-7px;left:0;width:14px;height:14px;border-radius:50%;background:#d8ddcf;box-shadow:0 0 0 1px #f3f2ed35;transform-origin:center;animation:process-breathe 3.1s ease-in-out infinite}.process li:nth-of-type(2) .process-dot{animation-delay:-.7s;animation-duration:3.8s}.process li:nth-of-type(3) .process-dot{animation-delay:-1.8s;animation-duration:3.4s}.process li:nth-of-type(4) .process-dot{animation-delay:-.3s;animation-duration:4.1s}.process li:nth-of-type(5) .process-dot{animation-delay:-2.1s;animation-duration:3.6s}.process li:nth-of-type(6) .process-dot{animation-delay:-1.2s;animation-duration:4.4s}
.process-route{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}.process-route path{fill:none;stroke:#d8ddcf;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;filter:url(#ink-texture);transition:stroke-dashoffset 2.6s ease}
@keyframes process-breathe{0%,100%{transform:scale(.86)}50%{transform:scale(1.16)}}
.craft-base{filter:url(#ink-texture)}
@media(max-width:650px){.process{row-gap:38px}.process li{padding-top:25px}}
@media(prefers-reduced-motion:reduce){.process-dot{animation:none}.process-route path{transition:none;stroke-dashoffset:0!important}}
/* Original pen sample recoloured without replacing its stroke texture. */
.craft-base-original{position:relative;color:transparent;filter:none}.craft-base-original .craft-base-art{position:absolute;left:0;top:50%;transform:translateY(-48%);width:100%;height:auto;overflow:visible;pointer-events:none}.craft-base-original .craft-target{color:transparent}.craft-base-original .craft-strike{z-index:2}
.process-route path{stroke:#fcdf04;stroke-width:2;transition:stroke-dashoffset 3.2s cubic-bezier(.3,.05,.25,1)}
.process-dot{width:22px;height:22px;top:-11px;background:#fcdf04;box-shadow:0 0 0 2px #fcdf0420}
@keyframes process-breathe{0%,100%{transform:scale(.82)}50%{transform:scale(1.24)}}
.process-dot{background:#d8ddcf;box-shadow:0 0 0 2px #f3f2ed24}
.process-head .craft-sequence .craft-correction{width:69%;right:1%;top:-9%}
@media(max-width:650px){.process-head .craft-sequence .craft-correction{width:74%;right:0;top:-4%}}
.process-head .craft-base-original .craft-base-art{filter:none}
/* Position the cross over the words in the original handwriting image. */
.craft-base-original .craft-target{position:static}
.craft-base-original .craft-strike{left:45%;width:53%!important;top:14%;height:76%!important}
/* Apply the same light adjustment to both frames for a fair comparison. */
.burn-compare>img{filter:brightness(1.5) saturate(1.05)}
/* Show the supplied original frames without changing their light or cropping. */
.burn-compare{aspect-ratio:4448/3096}.burn-compare>img{filter:none;object-fit:contain}
/* Credits: one aligned logo column, with individual staggered entrances. */
#career-list{overflow:hidden}.career-item{display:grid;grid-template-columns:minmax(145px,39%) minmax(0,1fr);gap:18px;align-items:center;min-height:76px}.career-logos{display:flex;align-items:center;justify-content:flex-start;gap:5px;min-width:0}.career-item .career-logos img{display:block;flex:1 1 0;min-width:0;width:100%;max-width:83px;max-height:40px;object-fit:contain;animation:none;opacity:0}.career[open] .career-logos img{animation:career-enter .85s cubic-bezier(.16,1,.3,1) both;animation-delay:var(--logo-delay)}
@keyframes career-enter{from{opacity:0;transform:translateX(-100vw)}to{opacity:1;transform:translateX(0)}}
.career-item .career-logo-netflix{filter:url(#netflix-red-only)}
.career-item .career-logo-artiach-shape{clip-path:polygon(2% 31%,49% 4%,98% 31%,98% 75%,50% 100%,2% 75%)}
.career-item .career-logo-fisher{clip-path:polygon(1% 34%,99% 34%,99% 62%,94% 65%,86% 65%,79% 62%,72% 65%,65% 65%,58% 62%,50% 65%,43% 65%,36% 62%,29% 65%,22% 65%,15% 62%,8% 65%,1% 62%)}
.career-item .career-logo-nocilla{mix-blend-mode:multiply}.career-item .career-logo-umbra{background:#242520;border-radius:3px;padding:3px}.career-text{min-width:0}.career-text b{overflow-wrap:anywhere}
@media(max-width:650px){.career-item{grid-template-columns:minmax(105px,37%) minmax(0,1fr);gap:12px}.career-logos{gap:3px}.career-item .career-logos img{max-height:34px}}
@media(prefers-reduced-motion:reduce){.career[open] .career-logos img{animation:none;opacity:1;transform:none}}
.career-logos{justify-content:flex-end}
/* A hand-drawn, step-by-step route through the production process. */
.process{margin-top:52px}.process-dot{opacity:0;transition:opacity .35s ease,transform .35s ease}.process-dot.route-visible{opacity:1}.process-route-sketch{overflow:visible}.process-route-sketch .process-segment{stroke:#fcdf04;stroke-width:1.7;stroke-dasharray:5 5;filter:url(#ink-texture);transition:none}.process-route-sketch .process-mask{stroke:#fff;stroke-width:8;stroke-dasharray:none;filter:none;transition:stroke-dashoffset .65s ease}.process-route-sketch .process-icon{overflow:visible;opacity:0;transform-box:fill-box;transform-origin:center;transition:opacity .3s ease,transform .45s ease;transform:scale(.7)}.process-route-sketch .process-icon.shown{opacity:1;transform:scale(1)}.process-route-sketch .process-icon path{fill:none;stroke:#fcdf04;stroke-width:1.6;stroke-dasharray:none;stroke-linecap:round;stroke-linejoin:round;filter:url(#ink-texture);transition:none}
@media(max-width:650px){.process{grid-template-columns:1fr;gap:0;margin-top:42px}.process li{min-height:82px;padding:0 0 22px 65px}.process-dot{left:0;top:0}.process li>span{margin-bottom:6px}.process-route-sketch .process-icon{overflow:visible}}
@media(prefers-reduced-motion:reduce){.process-dot{opacity:1;animation:none}.process-route-sketch .process-icon{opacity:1;transform:none;transition:none}.process-route-sketch .process-mask{stroke-dashoffset:0!important;transition:none}}
/* The process icons are the markers; their idle movement stays independent. */
.process{margin-top:65px}.process li{padding-top:44px}.process-dot{width:42px;height:42px;top:-21px;left:-21px;border-radius:0;background:#222520;box-shadow:none;display:grid;place-items:center}.process li:first-of-type .process-dot,.process li:last-of-type .process-dot{width:54px;height:54px;top:-27px;left:-27px}.process-node-icon{display:block;width:100%;height:100%;overflow:visible}.process-node-icon path{fill:none;stroke:#fcdf04;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;filter:url(#ink-texture)}.process-node-icon text{paint-order:stroke;stroke:#222520;stroke-width:.25px}
@media(max-width:650px){.process{margin-top:45px}.process li{min-height:90px;padding:0 0 24px 76px}.process-dot{left:0;top:0}.process li:first-of-type .process-dot,.process li:last-of-type .process-dot{left:-6px;top:-6px}}
/* Keep the process illustration and route the same colour in every browser. */
.process-node-icon path,.process-route-sketch .process-segment,.craft-strike path{filter:none;stroke:#fcdf04}
.process-node-icon,.process-route-sketch{isolation:isolate}
.process-node-icon{background:#222520}
/* Bring the handwritten note closer to the statement and make the studio link clear. */
.intro{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);column-gap:5%;row-gap:20px;min-height:0;padding-bottom:40px}
.intro>.section-marker{grid-column:1 / -1;grid-row:1;margin-bottom:30px}
.intro>.statement{grid-column:1 / -1;grid-row:2}
.intro>.hand-note.ink-art{grid-column:1;grid-row:3;align-self:start;width:min(100%,670px);margin:6px 0 0;position:relative;z-index:1}
.intro>.intro-detail{grid-column:2;grid-row:3;align-self:start;justify-self:end;width:100%;max-width:430px;margin:4px 0 0}
.intro .text-link{display:inline-flex;align-items:center;justify-content:space-between;gap:30px;min-height:48px;margin-top:23px;padding:12px 18px;border:1px solid #242520;border-radius:9px;font-size:15px;font-weight:600;transition:background .25s,color .25s,transform .25s}
.intro .text-link:hover{background:#222520;color:#fff;transform:translateY(-2px)}
.projects{padding-top:40px}
@media(max-width:650px){.intro{display:grid;grid-template-columns:minmax(0,1fr);row-gap:17px;padding-bottom:22px}.intro>.section-marker{grid-column:1;grid-row:1;margin-bottom:20px}.intro>.statement{grid-column:1;grid-row:2}.intro>.hand-note.ink-art{grid-column:1;grid-row:3;width:100%;margin:0;transform:rotate(-4deg)}.intro>.intro-detail{grid-column:1;grid-row:4;justify-self:start;max-width:none;margin:0}.intro .text-link{margin-top:20px}.projects{padding-top:35px}}
.projects-heading-copy{max-width:340px;margin-right:6%;display:grid;gap:20px}.section-heading .projects-heading-copy p{margin:0;max-width:none}.section-heading .projects-hint{border-top:1px solid #bbbdb2;padding-top:14px;font:11px/1.6 'Courier New',monospace;letter-spacing:.045em;color:#555a50}
@media(max-width:650px){.projects-heading-copy{margin:25px 0 0;max-width:390px;gap:14px}.section-heading .projects-hint{font-size:11px;line-height:1.55;padding-top:12px}}
/* Language-specific notes remain handwriting, without a separate subtitle. */
.translated-pen-text{font-family:'Segoe Script','Bradley Hand','Segoe Print',cursive;font-style:normal;font-weight:400;letter-spacing:0}
.translated-base{font-family:'Segoe Script','Bradley Hand','Segoe Print',cursive;color:#fcdf04;filter:url(#ink-texture)}
.process-head .translated-ink svg{filter:none}.process-head .translated-ink .craft-strike path{stroke:#fcdf04;filter:none}
.intro>.translated-ink .translated-human{display:block;width:100%;height:auto}
@media(max-width:650px){.translated-pen-text{font-size:72px}.process-head .translated-base{font-size:clamp(17px,4.8vw,27px)}}
/* Keep handwritten scans legible over the paper background. */
.intro .localized-human-ink{display:block;width:100%;height:auto;mix-blend-mode:multiply}
/* The blue strokes have a transparent alpha; no white scan rectangle. */
.intro .localized-human-ink{mix-blend-mode:normal}
/* Cuando los amos duermen: user-supplied background and foreground. */
.project-button[data-project="clad"] .project-visual>img{transition:opacity .25s ease;filter:none;transform:none}
.project-button[data-project="clad"]:hover .project-visual>img{filter:none;transform:none}
.clad-layer-stage{position:absolute;inset:0;display:block;overflow:hidden;pointer-events:none;opacity:0;z-index:1;transition:opacity .2s ease;background:#12110e}
.clad-layers-ready.clad-hover .clad-layer-stage{opacity:1}
.project-button[data-project="clad"] .clad-layer{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;filter:none;transition:transform .2s ease-out;will-change:transform}
.project-button[data-project="clad"] .clad-layer-bg{transform:translate(var(--bg-x,0%),var(--bg-y,0%)) scale(1.045)}
.project-button[data-project="clad"] .clad-layer-fg{transform:translate(var(--fg-x,0%),var(--fg-y,0%)) scale(1.045)}
.clad-focus .clad-layer-stage{animation:clad-refocus .42s ease-out both}
@keyframes clad-refocus{0%{filter:blur(0);transform:scale(1)}25%{filter:blur(2.2px);transform:scale(1.014)}100%{filter:blur(0);transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.clad-layer-stage{display:none}.clad-focus .clad-layer-stage{animation:none}}
/* Alliberem: keep the door, hand and locker frame registered as one plane. */
.project-button[data-project="santa-tecla"] .project-visual>img,.project-button[data-project="santa-tecla"]:hover .project-visual>img{transition:opacity .25s ease;filter:none;transform:none}
.project-button[data-project="santa-tecla"] .clad-layer{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;filter:none;transition:transform .2s ease-out;will-change:transform}
.project-button[data-project="santa-tecla"] .clad-layer-bg{transform:translate(var(--bg-x,0%),var(--bg-y,0%)) scale(1.045)}
.project-button[data-project="santa-tecla"] .clad-layer-fg{transform:translate(var(--fg-x,0%),var(--fg-y,0%)) scale(1.045)}
/* The guard moves independently; the locker door and frame stay aligned. */
.project-button[data-project="santa-tecla"] .clad-layer-mid{transform:translate(var(--mid-x,0%),var(--mid-y,0%)) scale(1.045)}
/* Alliberem: refocus the original first, then reveal the registered planes. */
.project-button[data-project="santa-tecla"] .clad-focus .clad-layer-stage{animation:none}
.project-button[data-project="santa-tecla"] .clad-layer-stage{transition:opacity .18s ease;transition-delay:0s}
.project-button[data-project="santa-tecla"] .clad-hover .clad-layer-stage{transition-delay:.38s}
.project-button[data-project="santa-tecla"] .clad-focus>img{animation:beasts-refocus .42s ease-out both}
@keyframes beasts-refocus{0%{filter:blur(0);transform:scale(1)}28%{filter:blur(2px);transform:scale(1.015)}100%{filter:blur(0);transform:scale(1)}}
.project-button[data-project="santa-tecla"] .clad-layer-bg{transform:translate(var(--bg-x,0%),var(--bg-y,0%)) scale(1.02)}
.project-button[data-project="santa-tecla"] .clad-layer-mid{transform:translate(var(--mid-x,0%),var(--mid-y,0%)) scale(1.02)}
.project-button[data-project="santa-tecla"] .clad-layer-fg{transform:translate(var(--fg-x,0%),var(--fg-y,0%)) scale(1.02)}
.project-button[data-project="santa-tecla"] .clad-layer.beasts-frame{filter:blur(.7px)}
@media(prefers-reduced-motion:reduce){.project-button[data-project="santa-tecla"] .clad-focus>img{animation:none}}
/* Alliberem: original photograph as one foreground, cut out by the supplied masks. */
.project-button[data-project="santa-tecla"] .beasts-original-plane{position:absolute;inset:0;display:block;pointer-events:none;background:url('assets/santa-tecla-clean.webp') center/cover no-repeat;transform:translate(var(--fg-x,0%),var(--fg-y,0%));transition:transform .2s ease-out;will-change:transform;-webkit-mask-image:url('assets/beasts-layer-frame.png'),url('assets/beasts-layer-door.png'),url('assets/beasts-layer-person.png');-webkit-mask-position:center;-webkit-mask-size:cover;-webkit-mask-repeat:no-repeat;-webkit-mask-composite:source-over;mask-image:url('assets/beasts-layer-frame.png'),url('assets/beasts-layer-door.png'),url('assets/beasts-layer-person.png');mask-mode:alpha;mask-position:center;mask-size:cover;mask-repeat:no-repeat;mask-composite:add}
/* A single foreground silhouette extracted from the original composition. */
.project-button[data-project="santa-tecla"] .beasts-original-plane{-webkit-mask-image:url('assets/beasts-foreground-cutout-v3.png');-webkit-mask-position:center;-webkit-mask-size:cover;-webkit-mask-repeat:no-repeat;mask-image:url('assets/beasts-foreground-cutout-v3.png');mask-position:center;mask-size:cover;mask-repeat:no-repeat;mask-mode:alpha}
/* Both supplied planes form the image before the pointer enters. */
.project-button[data-project="santa-tecla"] .clad-layers-ready .clad-layer-stage{opacity:1;transition:opacity .18s ease;transition-delay:0s}
.project-button[data-project="santa-tecla"] .clad-focus .clad-layer-stage{animation:clad-refocus .42s ease-out both}
.project-button[data-project="santa-tecla"] .clad-focus>img{animation:none}
/* Old Spice: four registered planes, with the snow held in place. */
.project-button[data-project="old-spice"] .project-visual>img,.project-button[data-project="old-spice"]:hover .project-visual>img{filter:none;transform:none;transition:opacity .25s ease}
.project-button[data-project="old-spice"] .clad-layers-ready .clad-layer-stage{opacity:1;transition:opacity .18s ease;transition-delay:0s}
.project-button[data-project="old-spice"] .clad-layer{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;filter:none;transition:transform .2s ease-out;will-change:transform}
.project-button[data-project="old-spice"] .clad-layer-bg{transform:translate(var(--bg-x,0%),var(--bg-y,0%)) scale(1.025)}
.project-button[data-project="old-spice"] .clad-layer-snow{transform:scale(1.025)}
.project-button[data-project="old-spice"] .clad-layer-mid{transform:translate(var(--mid-x,0%),var(--mid-y,0%)) scale(1.025)}
.project-button[data-project="old-spice"] .clad-layer-fg{transform:translate(var(--fg-x,0%),var(--fg-y,0%)) scale(1.025)}
.project-button[data-project="old-spice"] .clad-focus .clad-layer-stage{animation:clad-refocus .42s ease-out both}
@media(prefers-reduced-motion:reduce){.project-button[data-project="old-spice"] .clad-focus .clad-layer-stage{animation:none}}
/* Niño no toques: forest, reconstructed cabin plane and original hikers. */
.project-button[data-project="nino-no-toques"] .project-visual>img,.project-button[data-project="nino-no-toques"]:hover .project-visual>img{filter:none;transform:none;transition:opacity .25s ease}
.project-button[data-project="nino-no-toques"] .clad-layers-ready .clad-layer-stage{opacity:1;transition:opacity .18s ease;transition-delay:0s}
.project-button[data-project="nino-no-toques"] .clad-layer{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;filter:none;transition:transform .2s ease-out;will-change:transform}
.project-button[data-project="nino-no-toques"] .clad-layer-bg{transform:translate(var(--bg-x,0%),var(--bg-y,0%)) scale(1.025)}
.project-button[data-project="nino-no-toques"] .clad-layer-mid{transform:translate(var(--mid-x,0%),var(--mid-y,0%)) scale(1.025)}
.project-button[data-project="nino-no-toques"] .nino-original-people{position:absolute;inset:0;display:block;pointer-events:none;background:url('assets/nino-reference-v2.webp') center/cover no-repeat;transform:translate(var(--fg-x,0%),var(--fg-y,0%)) scale(1.025);transition:transform .2s ease-out;will-change:transform;-webkit-mask-image:url('assets/nino-people-mask.png');-webkit-mask-position:center;-webkit-mask-size:cover;-webkit-mask-repeat:no-repeat;mask-image:url('assets/nino-people-mask.png');mask-mode:alpha;mask-position:center;mask-size:cover;mask-repeat:no-repeat}
.project-button[data-project="nino-no-toques"] .clad-focus .clad-layer-stage{animation:clad-refocus .42s ease-out both}
@media(prefers-reduced-motion:reduce){.project-button[data-project="nino-no-toques"] .clad-focus .clad-layer-stage{animation:none}}
/* Keep the actual frame visible and add small pointer-driven foreground motion. */
.project-button[data-project="nino-no-toques"] .clad-layer-nino-base{transform:scale(1.025)}
.project-button[data-project="nino-no-toques"] .clad-layer-nino-left{clip-path:polygon(0 0,29% 0,34% 42%,36% 100%,0 100%);transform:translate(var(--fg-x,0%),var(--fg-y,0%)) scale(1.025)}
.project-button[data-project="nino-no-toques"] .clad-layer-nino-right{clip-path:polygon(67% 0,100% 0,100% 100%,65% 100%,66% 40%);transform:translate(var(--fg-x,0%),var(--fg-y,0%)) scale(1.025)}
/* 35 mm: original image at rest, with three supplied planes on hover. */
.project-button[data-project="35mm"] .project-visual>img,.project-button[data-project="35mm"]:hover .project-visual>img{filter:none;transform:none;transition:opacity .25s ease}
.project-button[data-project="35mm"] .clad-layer{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;filter:none;transition:transform .2s ease-out;will-change:transform}
.project-button[data-project="35mm"] .clad-layer-bg{transform:translate(var(--bg-x,0%),var(--bg-y,0%)) scale(1.025)}
.project-button[data-project="35mm"] .clad-layer-mid{transform:translate(var(--mid-x,0%),var(--mid-y,0%)) scale(1.025)}
.project-button[data-project="35mm"] .clad-layer-fg{transform-origin:center bottom;transform:translate(var(--fg-x,0%),var(--fg-y,0%)) scale(.77)}
.project-button[data-project="35mm"] .clad-focus .clad-layer-stage{animation:clad-refocus .42s ease-out both}
@media(prefers-reduced-motion:reduce){.project-button[data-project="35mm"] .clad-focus .clad-layer-stage{animation:none}}
/* The warrior is sampled at the original photograph's scale and position. */
.project-button[data-project="35mm"] .warrior-original-plane{position:absolute;inset:0;display:block;pointer-events:none;background:url('assets/35mm-reference-v2.webp') center/cover no-repeat;transform:translate(var(--fg-x,0%),var(--fg-y,0%));transition:transform .2s ease-out;will-change:transform;-webkit-mask-image:url('assets/35mm-warrior-mask-v2.png');-webkit-mask-position:center;-webkit-mask-size:cover;-webkit-mask-repeat:no-repeat;mask-image:url('assets/35mm-warrior-mask-v2.png');mask-mode:alpha;mask-position:center;mask-size:cover;mask-repeat:no-repeat}
/* Display the aligned transparent warrior directly above the crowd. */
.project-button[data-project="35mm"] .clad-layer-fg{transform-origin:center;transform:translate(var(--fg-x,0%),var(--fg-y,0%)) scale(1.025)}
/* Encara hi són: the supplied transparent foreground sits above the background. */
.project-button[data-project="encara-hi-son"] .project-visual>img,.project-button[data-project="encara-hi-son"]:hover .project-visual>img{filter:none;transform:none;transition:opacity .25s ease}
.project-button[data-project="encara-hi-son"] .clad-layers-ready .clad-layer-stage{opacity:1;transition:opacity .18s ease;transition-delay:0s}
.project-button[data-project="encara-hi-son"] .clad-layer{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;filter:none;transition:transform .2s ease-out;will-change:transform}
.project-button[data-project="encara-hi-son"] .clad-layer-bg{z-index:0;transform:translate(var(--bg-x,0%),var(--bg-y,0%)) scale(1.025)}
.project-button[data-project="encara-hi-son"] .clad-layer-fg{z-index:1;transform:translate(var(--fg-x,0%),var(--fg-y,0%)) scale(1.025)}
.project-button[data-project="encara-hi-son"] .clad-focus .clad-layer-stage{animation:clad-refocus .42s ease-out both}
@media(prefers-reduced-motion:reduce){.project-button[data-project="encara-hi-son"] .clad-focus .clad-layer-stage{animation:none}}
/* Niño no toques: original still at rest; four separate planes on hover. */
.project-button[data-project="nino-no-toques"] .clad-layers-ready .clad-layer-stage{opacity:0;transition:opacity .2s ease;transition-delay:0s}
.project-button[data-project="nino-no-toques"] .clad-layers-ready.clad-hover .clad-layer-stage{opacity:1;transition-delay:.12s}
.project-button[data-project="nino-no-toques"] .clad-layer-bg{z-index:0;transform:translate(var(--bg-x,0%),var(--bg-y,0%)) scale(1.025)}
.project-button[data-project="nino-no-toques"] .clad-layer-mid{z-index:1;transform:translate(var(--bg-x,0%),var(--bg-y,0%)) scale(1.025)}
.project-button[data-project="nino-no-toques"] .clad-layer-branches{z-index:2;transform:translate(var(--branches-x,0%),var(--branches-y,0%)) scale(1.025)}
.project-button[data-project="nino-no-toques"] .clad-layer-fg{z-index:3;transform:translate(var(--fg-x,0%),var(--fg-y,0%)) scale(1.025)}
.project-button[data-project="nino-no-toques"] .clad-focus>img{animation:beasts-refocus .42s ease-out both}
@media(prefers-reduced-motion:reduce){.project-button[data-project="nino-no-toques"] .clad-focus>img{animation:none}}
/* Citysens: refocus the still, then reveal the planter over its background. */
.project-button[data-project="citysens"] .project-visual>img,.project-button[data-project="citysens"]:hover .project-visual>img{filter:none;transform:none;transition:opacity .25s ease}
.project-button[data-project="citysens"] .clad-layer-stage{opacity:0;transition:opacity .2s ease}
.project-button[data-project="citysens"] .clad-layers-ready.clad-hover .clad-layer-stage{opacity:1;transition-delay:.12s}
.project-button[data-project="citysens"] .clad-layer{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;filter:none;transition:transform .2s ease-out;will-change:transform}
.project-button[data-project="citysens"] .clad-layer-bg{z-index:0;transform:translate(var(--bg-x,0%),var(--bg-y,0%)) scale(1.025)}
.project-button[data-project="citysens"] .clad-layer-fg{z-index:1;transform:translate(var(--fg-x,0%),var(--fg-y,0%)) scale(1.025)}
.project-button[data-project="citysens"] .clad-focus>img{animation:beasts-refocus .42s ease-out both}
.project-button[data-project="citysens"] .clad-focus .clad-layer-stage{animation:clad-refocus .42s ease-out both}
@media(prefers-reduced-motion:reduce){.project-button[data-project="citysens"] .clad-focus>img,.project-button[data-project="citysens"] .clad-focus .clad-layer-stage{animation:none}}
/* The desktop navigation gently returns when scrolling upwards. */
@media(min-width:651px){
 .header{position:sticky;top:0;z-index:30;background:#f3f2ed;transition:transform .26s ease,opacity .22s ease;will-change:transform,opacity}
 .header.header-hidden{transform:translateY(-105%);opacity:0;pointer-events:none}
 .menu-panel{position:fixed;z-index:31}
}
@media(prefers-reduced-motion:reduce){.header{transition:none}}
/* Synchronized, silent before/after comparison. */
.burn-compare>video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.burn-compare>video.burn-after{clip-path:inset(0 0 0 var(--cut))}
.burn-play{display:inline-block;margin-top:12px;padding:10px 15px;border:1px solid #a6a79e;border-radius:8px;font-size:13px;cursor:pointer}
.burn-play:hover{background:#e5e5dc}
.burn-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0}
.burn-canvas.is-ready{opacity:1}
.burn-compare>video.burn-paired[hidden]{display:none}
/* Contact: a short, readable enquiry form and a direct conversation link. */
.contact-form-wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(36px,7vw,110px);padding:clamp(36px,5vw,75px) 0;border-top:1px solid #1f201d55;margin-top:55px}
.contact-form-kicker{font:12px/1.5 'Courier New',monospace;letter-spacing:.06em}
.contact-form-wrap h3{font-size:clamp(30px,3.3vw,49px);letter-spacing:-.045em;line-height:1.08;margin:20px 0 14px}
.contact-form-intro{font-size:16px;line-height:1.55;max-width:340px}
.contact-whatsapp{display:inline-flex;align-items:center;gap:20px;padding:15px 19px;border:1px solid #20211f;border-radius:10px;margin-top:25px;font-size:15px;font-weight:bold;transition:background .2s,color .2s}
.contact-whatsapp:hover{background:#20211f;color:#fff}.contact-whatsapp[hidden]{display:none}
#contact-form{display:grid;gap:20px;min-width:0}#contact-form label{display:grid;gap:8px;font-size:14px;font-weight:bold}
.contact-form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
#contact-form input,#contact-form textarea{width:100%;border:1px solid #20211f80;border-radius:8px;background:#fffdf1;color:#20211f;font:16px/1.4 Arial,sans-serif;padding:13px 14px;outline-offset:3px}
#contact-form textarea{resize:vertical;min-height:140px}.contact-trap{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.contact-privacy{font-size:13px;line-height:1.55;max-width:620px}.contact-privacy a{text-decoration:underline;text-underline-offset:3px}
.contact-submit{justify-self:start;background:#20211f;color:white;border:1px solid #20211f;border-radius:9px;padding:15px 22px;font-weight:bold;display:inline-flex;gap:35px;align-items:center}.contact-submit:hover{background:#41423e}.contact-submit:disabled{opacity:.55;cursor:wait}.contact-status{font-size:14px;line-height:1.5;min-height:1.5em}
@media(max-width:700px){.contact-form-wrap{grid-template-columns:1fr;gap:30px;margin-top:40px;padding:36px 0}.contact-form-row{grid-template-columns:1fr;gap:18px}.contact-form-wrap h3{font-size:34px}}
/* Clear project link and a gentle invitation to explore the career. */
.citysens-link{display:flex;justify-content:space-between;align-items:center;width:fit-content;margin:18px 40px 4px;padding:12px 17px;border-radius:8px;background:#ffdc00;color:#20211f;font-weight:700;font-size:15px;text-decoration:none;transition:background .2s,transform .2s}
.citysens-link:hover{background:#ffe747;transform:translateY(-2px)}
.career summary{font-weight:700}.career summary>span:last-child{display:grid;place-items:center;width:32px;height:32px;border:1px solid #9d9e94;border-radius:50%;transition:background .2s,transform .2s}
.career:not([open]) summary>span:last-child{animation:career-invite 3.2s ease-in-out infinite}
.career[open] summary>span:last-child{transform:rotate(45deg)}
@keyframes career-invite{0%,78%,100%{background:transparent;box-shadow:0 0 0 0 #e9c70000}85%{background:#ffdc00;box-shadow:0 0 0 5px #e9c70022}}
#contact-details{scroll-margin-top:0}
#contact-form .contact-consent{display:flex;align-items:flex-start;gap:10px;font-size:14px;font-weight:400;line-height:1.5}
#contact-form .contact-consent input{width:19px;height:19px;flex:0 0 19px;margin:1px 0 0;padding:0;accent-color:#20211f}
.contact-consent a{text-decoration:underline;text-underline-offset:3px;font-weight:700}
@media(max-width:650px){.citysens-link{margin:15px 22px 4px}#contact-details{scroll-margin-top:0}}
@media(prefers-reduced-motion:reduce){.career:not([open]) summary>span:last-child{animation:none}}
@media(min-width:701px){.contact-form-wrap{margin-top:30px;padding-top:35px;padding-bottom:40px}}
/* A distinct, accessible result after submitting the contact form. */
.contact-status:empty{display:none}
.contact-status:not(:empty){display:flex;align-items:center;gap:14px;max-width:100%;padding:16px 18px;border-radius:10px;font-size:16px;font-weight:700;line-height:1.45;animation:contact-notice-in .35s ease both}
.contact-status[data-state="sent"]{background:#20211f;color:#fffdf1}
.contact-status[data-state="sent"]::before{content:'✓';display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;border-radius:50%;background:#ffdc00;color:#20211f;font-size:20px}
.contact-status[data-state="error"],.contact-status[data-state="local"]{background:#fffdf1;color:#35241b;border:1px solid #8b4332}
.contact-status[data-state="error"]::before,.contact-status[data-state="local"]::before{content:'!';display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;border-radius:50%;background:#8b4332;color:#fff;font-size:20px}
.contact-status[data-state="sending"]{background:#fff8c8;color:#20211f}
@keyframes contact-notice-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.contact-status:not(:empty){animation:none}}

/* Social links sit quietly alongside the studio signature. */
.footer-social{display:flex;align-items:center;gap:3px;color:#63665e}
.footer-social a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;transition:color .2s,background-color .2s,transform .2s}
.footer-social svg{display:block;width:20px;height:20px}
.footer-social a:hover,.footer-social a:focus-visible{color:#20211f;background:#ffdc00;transform:translateY(-2px)}
@media(max-width:650px){.footer-social{gap:2px}.footer-social a{width:40px;height:40px}}
@media(prefers-reduced-motion:reduce){.footer-social a{transition:none}.footer-social a:hover,.footer-social a:focus-visible{transform:none}}

/* The same social links are available from the navigation. */
.menu-social{display:flex;align-items:center;gap:5px;margin-top:18px;color:#55564c}
.menu-social .menu-social-brand{margin-right:10px;color:#33352f}
.menu-social a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;transition:color .2s,background-color .2s,transform .2s}
.menu-social svg{display:block;width:20px;height:20px}
.menu-social a:hover,.menu-social a:focus-visible{color:#fff;background:#20211f;transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){.menu-social a{transition:none}.menu-social a:hover,.menu-social a:focus-visible{transform:none}}