@font-face{font-family:Display;src:url(assets/display.otf);font-display:swap}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:25px}body{margin:0;background:#fafaf8 url(assets/paper.webp);color:#090909;font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:1.4}button,input,textarea{font:inherit}a{color:inherit;text-decoration:none}button,a,input,textarea{outline-offset:5px}button{cursor:pointer}button:hover,a:hover{color:#ff008a}header{height:100px;padding:14px 5%;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2}.logo{font-family:Arial,sans-serif;font-weight:950;font-size:75px;letter-spacing:-7px;line-height:1}.logo span{color:#ff008a;letter-spacing:0}nav{display:flex;gap:50px;font-family:Display,sans-serif;text-transform:uppercase;font-size:17px}#menu{border:0;background:transparent;width:36px;padding:4px 0;display:grid;gap:8px}#menu i{height:1px;background:#111;display:block}.hero{height:355px;display:flex;align-items:center;padding-left:5%;position:relative;overflow:hidden}.hero>div{width:25%;z-index:1}.hero img{width:78%;height:100%;object-fit:fill;align-self:flex-end}h1,h2,h3{font-family:Display,'Arial Narrow',sans-serif;text-transform:uppercase;line-height:.99;margin:0}h1{font-size:43px}h2{font-size:64px;letter-spacing:-2px;position:relative;display:inline-block}h2:after{content:'';position:absolute;bottom:-14px;left:15%;width:80%;height:7px;background:#ff008a;border-radius:80% 30% 60% 20%;transform:rotate(-1deg)}h3{font-size:22px;letter-spacing:-.3px}small{font-family:Display,sans-serif;font-size:16px;display:block}.dash{display:block;width:50px;height:2px;background:#111;margin-top:24px}.section{padding:22px 5% 24px;border-top:1px solid #c5c5c3;scroll-margin-top:20px}.section-head{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-bottom:53px}.section-head p{font-size:15px;margin:28px 0 0}.all{font-family:Display,sans-serif;text-transform:uppercase;position:relative;min-width:120px;line-height:1.1;margin-top:25px}.all span{position:absolute;right:0;top:2px;font-family:Arial;font-size:28px}.projects{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.project{border:0;background:none;text-align:left;padding:0;color:inherit;min-width:0}.project img{width:100%;aspect-ratio:1.68;object-fit:cover;display:block;margin-bottom:10px;transition:filter .25s,transform .25s}.project:hover img{filter:saturate(1.2);transform:translateY(-4px)}.project h3{font-size:19px;margin-bottom:5px}.project p{font-size:14px;line-height:1.4;margin:0}.arrows{display:flex;justify-content:flex-end;gap:14px;margin-top:-29px;position:relative;pointer-events:none}.arrows button{pointer-events:auto;border:0;background:transparent;font-size:30px;padding:0}.projects .project:last-child p{padding-bottom:30px}.services-head{justify-content:flex-start;margin-bottom:28px}.services-head p{margin-top:10px}.services{display:grid;grid-template-columns:repeat(5,1fr);gap:0}.services article{padding:0 24px;border-right:1px solid #c5c5c3}.services article:first-child{padding-left:0}.services article:last-child{border:0}.services p{font-size:14px;margin:9px 0 3px}.services small{font:12px Arial;color:#777}.icon{height:75px;font:65px Arial;line-height:1;color:#111;margin:0 0 9px 25px}.rings{color:#ff008a;text-shadow:0 -9px #111;font-size:67px}.squares{color:#ff008a;text-shadow:9px -8px #111,-9px 8px #ff008a}.circles{font-size:48px;position:relative;letter-spacing:-24px}.circles span{position:relative}.circles b{font:40px Arial;color:#ff008a;position:relative;left:13px}.squareplus{color:#ff008a;font-size:46px;border:1px solid #111;box-shadow:6px -5px 0 -1px #fafaf8,6px -5px #111;width:43px;height:43px;margin-top:10px;margin-bottom:31px;text-align:center}.star{color:#ff008a;font-size:65px}.about{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:35px;padding-top:0;overflow:hidden}.intro{padding-top:18px;padding-right:25px}.intro>p{margin:48px 0 0;font-size:16px;max-width:320px}.intro .dash{margin-top:24px}.intro .manifesto{font-family:monospace;text-transform:uppercase;letter-spacing:1.8px;margin-top:20px}.person{position:relative;border-left:1px solid #c5c5c3;padding:0 0 0 35px;margin:25px 0 4px}.person img{width:calc(100% + 24px);height:135px;object-fit:cover;margin:-25px -12px 12px}.person h3{font-size:26px}.person strong{font-size:15px;display:block;margin:4px 0 12px}.person p{font-size:14px;margin:0;line-height:1.45}.contact{display:grid;grid-template-columns:1fr 1.9fr .5fr;gap:40px;padding-top:20px;padding-bottom:30px}.contact h2{font-size:60px}.contact>div>p{margin:30px 0 0}.contact form{border-left:1px solid #c5c5c3;padding-left:45px;display:grid;grid-template-columns:1.3fr 1fr;gap:30px;align-items:center}.fields label{display:block;text-transform:uppercase;font-family:monospace;font-size:13px;position:relative;margin-bottom:10px}.fields input,.fields textarea{border:0;border-bottom:1px solid #aaa;background:transparent;width:100%;padding:3px 0;resize:vertical}.send button{background:transparent;border:1px solid #ff008a;padding:13px 14px;display:flex;gap:18px;align-items:center;justify-content:space-between;width:100%;font-family:Display;text-transform:uppercase;font-size:19px}.send button span{color:#ff008a;font:26px Arial}.form-note{font-size:10px;line-height:1.4;color:#666}#status{grid-column:1/-1;font-size:12px;margin:0}.social{border-left:1px solid #c5c5c3;padding-left:35px;display:flex;justify-content:center;flex-direction:column;gap:12px;font-family:monospace;text-transform:uppercase;font-size:13px}.social small{font:10px Arial;color:#777;text-transform:none}footer{border-top:1px solid #c5c5c3;padding:18px 5%;display:flex;align-items:center;justify-content:space-between;height:110px}footer .logo{font-size:60px}.top{font-size:32px;color:#ff008a}dialog{border:1px solid #111;padding:30px;width:min(700px,90vw);background:#fafaf8}dialog::backdrop{background:#000a;backdrop-filter:blur(5px)}dialog img{width:100%;margin-bottom:20px}dialog h3{font-size:35px}.close{position:absolute;right:8px;top:0;font-size:30px;background:#fff;border:0}.pending{font-size:13px;color:#666}@media(min-width:1400px){body{max-width:1600px;margin:auto}.hero{height:440px}}@media(max-width:800px){header{height:85px}.logo{font-size:60px}nav{gap:18px;font-size:15px}.hero{height:280px}h1{font-size:32px}.section-head{gap:20px;flex-wrap:wrap}.section-head p{margin:15px 0 0;max-width:330px}.all{margin-top:0}h2{font-size:52px}.projects{grid-template-columns:repeat(2,1fr);gap:25px 16px}.arrows{margin-top:15px}.projects .project:last-child p{padding:0}.services{grid-template-columns:repeat(3,1fr);gap:25px 0}.services article:nth-child(3){border:0}.services article:nth-child(4){padding-left:0}.about{grid-template-columns:1fr 1fr;gap:24px}.intro{grid-column:1/-1;padding-bottom:20px}.intro>p{max-width:600px}.person{padding-left:20px}.contact{grid-template-columns:1fr}.contact form{padding-left:0;border:0}.social{border:0;padding:0;flex-direction:row;justify-content:flex-start;flex-wrap:wrap}.social small{width:100%}}@media(max-width:520px){header{height:80px}nav{display:none;position:absolute;top:80px;left:0;right:0;background:#fafaf8;padding:25px 6%;border-block:1px solid #aaa;flex-direction:column;font-size:26px}nav.open{display:flex}.hero{height:310px;padding:0;display:block}.hero>div{position:absolute;top:12px;left:6%;width:auto}.hero h1{font-size:28px}.hero .dash{margin-top:15px;width:35px}.hero img{position:absolute;bottom:0;width:100%;height:auto;max-height:230px}.section{padding:22px 6% 30px}.section-head{margin-bottom:35px;align-items:flex-start}.section-head p{font-size:14px}.section-head p br{display:none}.all{font-size:14px;margin-top:12px}.section-head>div{width:100%}h2{font-size:52px}.project h3{font-size:19px}.project p{font-size:12px}.services-head{gap:10px}.services{grid-template-columns:1fr 1fr;gap:25px 0}.services article{padding:0 15px}.services article:nth-child(odd){padding-left:0;border-right:1px solid #c5c5c3}.services article:nth-child(even){border:0;padding-left:20px}.services article:last-child{border:0}.services p{font-size:13px}.about{display:block}.intro{padding:0 0 30px}.intro>p{margin-top:35px}.person{border-left:0;border-top:1px solid #ccc;padding:25px 0 5px;margin-top:0}.person img{width:100%;height:160px;object-fit:contain;margin:0 0 15px}.person p{font-size:15px}.contact{gap:28px}.contact h2{font-size:52px}.contact form{grid-template-columns:1fr;gap:15px}.send button{width:210px}.form-note{max-width:270px}footer{height:100px}h2:after{height:5px} }@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
.project{display:flex;flex-direction:column;align-items:stretch}.project h3{text-align:left}.project p{text-align:left}.logo span{display:inline-block;font-size:0;width:15px;height:15px;background:#ff008a;border-radius:50%;margin-left:6px}footer .logo span{width:12px;height:12px}nav.open{display:flex}
/* A quick opening tear, followed by the gentle movement of the paper. */
.hero img{transform-origin:55% 54%;animation:hero-tear 1.3s cubic-bezier(.16,1,.3,1) both,hero-breathe 6s ease-in-out 1.3s infinite;translate:var(--hero-x,0px) var(--hero-y,0px);transition:translate .65s cubic-bezier(.2,.7,.3,1);will-change:transform,translate;backface-visibility:hidden}
.hero h1{animation:hero-title .85s ease-out both}.hero .dash{animation:hero-line .8s ease-out .25s both;transform-origin:left}
@keyframes hero-tear{0%{clip-path:polygon(0 46%,25% 48%,50% 45%,75% 48%,100% 46%,100% 54%,75% 52%,50% 55%,25% 52%,0 54%);transform:scale(.94) rotate(-2deg);opacity:0}18%{opacity:1}100%{clip-path:polygon(0 0,25% 0,50% 0,75% 0,100% 0,100% 100%,75% 100%,50% 100%,25% 100%,0 100%);transform:scale(1) rotate(0)}}
@keyframes hero-breathe{0%,100%{transform:translateY(0) rotate(0) scale(1)}50%{transform:translateY(-5px) rotate(-.45deg) scale(1.012)}}
@keyframes hero-title{from{opacity:0;transform:translateY(17px)}to{opacity:1;transform:translateY(0)}}
@keyframes hero-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.motion-toggle{position:absolute;bottom:18px;left:5%;z-index:2;width:30px;height:30px;display:grid;place-items:center;border:1px solid #bdbdb9;border-radius:50%;background:#fafaf8c9;color:#555;font:13px Arial;padding:0}.motion-toggle:hover{border-color:#ff008a;color:#ff008a}.hero.is-paused img,.hero.is-paused h1,.hero.is-paused .dash{animation-play-state:paused}.hero.is-paused img{translate:0 0}
@media(max-width:520px){.motion-toggle{left:auto;right:6%;bottom:8px;width:26px;height:26px}.hero img{animation:hero-tear 1.3s cubic-bezier(.16,1,.3,1) both,hero-breathe 7s ease-in-out 1.3s infinite}}
@media(prefers-reduced-motion:reduce){.hero img,.hero h1,.hero .dash{animation:none;translate:none;will-change:auto}.motion-toggle{display:none}}
@font-face{font-family:Heavy;src:url(assets/heavy.ttf) format('truetype');font-weight:800;font-display:swap}
h1,h2,h3{font-family:Heavy,Display,sans-serif;font-weight:800}h2{letter-spacing:-1px}h3{letter-spacing:-.5px}
.logo{-webkit-text-stroke:2.5px currentColor;font-weight:900;letter-spacing:-6px}.logo span{-webkit-text-stroke:0;margin-left:8px;vertical-align:baseline}
header{height:120px}.brand{display:flex;flex-direction:column;align-items:flex-start;flex-shrink:0}.brand-tagline{font-family:Display,sans-serif;text-transform:uppercase;font-size:14px;letter-spacing:.8px;margin:8px 0 0 3px;line-height:1}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hero{padding:0 4%;height:355px;display:flex;justify-content:center;overflow:hidden}.hero>.hero-art{width:100%;height:100%;position:relative;z-index:0;overflow:hidden}.hero-art img{display:block;position:relative;width:100%;height:100%;object-fit:contain;animation:hero-impact 1.8s cubic-bezier(.16,1,.3,1) both,hero-breathe 6s ease-in-out 1.8s infinite;clip-path:none}
.tear-sheet{position:absolute;inset:-4%;pointer-events:none;background:#fafaf8 url(assets/paper.webp);filter:drop-shadow(0 6px 5px #0005);will-change:transform;z-index:1}
.tear-top{clip-path:polygon(0 0,100% 0,100% 49%,96% 52%,92% 48%,88% 51%,84% 47%,80% 52%,76% 49%,72% 53%,68% 48%,64% 51%,60% 47%,56% 53%,52% 49%,48% 52%,44% 48%,40% 53%,36% 49%,32% 51%,28% 47%,24% 52%,20% 49%,16% 53%,12% 48%,8% 51%,4% 48%,0 52%);animation:paper-top 1.8s cubic-bezier(.65,0,.2,1) both;transform-origin:80% 0}
.tear-bottom{clip-path:polygon(0 51%,4% 47%,8% 50%,12% 47%,16% 52%,20% 48%,24% 51%,28% 46%,32% 50%,36% 48%,40% 52%,44% 47%,48% 51%,52% 48%,56% 52%,60% 46%,64% 50%,68% 47%,72% 52%,76% 48%,80% 51%,84% 46%,88% 50%,92% 47%,96% 51%,100% 48%,100% 100%,0 100%);animation:paper-bottom 1.8s cubic-bezier(.65,0,.2,1) both;transform-origin:15% 100%}
@keyframes paper-top{0%,8%{transform:translate(0,0) rotate(0)}32%{transform:translate(-1%,-4%) rotate(-1deg)}60%{transform:translate(1%,-36%) rotate(3deg)}100%{transform:translate(-2%,-110%) rotate(-5deg)}}
@keyframes paper-bottom{0%,8%{transform:translate(0,0) rotate(0)}32%{transform:translate(1%,4%) rotate(1deg)}60%{transform:translate(-1%,36%) rotate(-3deg)}100%{transform:translate(2%,110%) rotate(5deg)}}
@keyframes hero-impact{0%{transform:scale(1.06);opacity:.6}100%{transform:scale(1);opacity:1}}
.hero.is-paused .tear-sheet{animation-play-state:paused}
h2:after{transform-origin:left center;transition:transform .5s cubic-bezier(.2,.8,.2,1),filter .5s;height:7px}h2:hover:after{animation:underline-swipe .65s cubic-bezier(.2,.8,.2,1) both}
@keyframes underline-swipe{0%{transform:scaleX(1) rotate(-1deg)}30%{transform:scaleX(.15) rotate(-3deg)}70%{transform:scaleX(1.12) rotate(1deg)}100%{transform:scaleX(1.04) rotate(-1deg)}}
@media(max-width:800px){header{height:110px}.brand-tagline{font-size:12px;letter-spacing:.3px}.hero{height:280px}nav{gap:15px}.contact h2{font-size:52px}}
@media(max-width:520px){header{height:100px}nav{top:100px}.hero{height:260px;padding:0}.hero>.hero-art{position:relative;inset:auto;width:100%;height:100%}.hero-art img{position:relative;inset:auto;height:100%;width:100%;max-height:none;object-fit:contain;animation:hero-impact 1.8s cubic-bezier(.16,1,.3,1) both,hero-breathe 7s ease-in-out 1.8s infinite}.brand-tagline{font-size:12px}h2{font-size:50px}}
@media(prefers-reduced-motion:reduce){.hero-art img{animation:none}.tear-sheet{display:none}h2:hover:after{animation:none}}
/* A heavier wordmark with its exclamation lifted over the last letter. */
.logo{position:relative;display:inline-block;-webkit-text-stroke:4.5px currentColor;letter-spacing:-5px;padding-right:7px}
.logo .logo-mark,footer .logo .logo-mark{position:absolute;top:-10px;right:-14px;display:block;width:auto;height:auto;margin:0;background:none;border-radius:0;color:#ff008a;font-family:Heavy,Arial,sans-serif;font-size:39px;line-height:1;letter-spacing:0;-webkit-text-stroke:1px #ff008a;transform:rotate(12deg)}
.brand{padding-top:8px}.brand-tagline{margin-top:10px}footer .logo{-webkit-text-stroke:3.5px currentColor}footer .logo .logo-mark{font-size:31px;top:-8px;right:-12px}
/* Each heading sits inside a loose, hand-drawn animated loop. */
h2{text-transform:none;isolation:isolate;overflow:visible;line-height:1.12}h2:after{content:none}.title-word{position:relative;z-index:1}.title-orbit{position:absolute;left:-17px;top:-10px;width:calc(100% + 34px);height:calc(100% + 24px);overflow:visible;pointer-events:none;z-index:0}.title-orbit path{fill:none;stroke:#ff008a;stroke-width:3.2;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:title-wrap 7s cubic-bezier(.4,0,.2,1) infinite}
h2:hover .title-orbit path{animation-duration:2.8s;stroke-width:4}
@keyframes title-wrap{0%{stroke-dashoffset:1}27%,76%{stroke-dashoffset:0}100%{stroke-dashoffset:-1}}
@media(max-width:520px){.logo{-webkit-text-stroke:4px currentColor}.logo .logo-mark{font-size:33px;top:-10px;right:-10px}.title-orbit{left:-12px;width:calc(100% + 24px)}}
@media(prefers-reduced-motion:reduce){.title-orbit path{animation:none;stroke-dashoffset:0}}
@font-face{font-family:GothicFua;src:url(assets/gothic-demi.otf) format('opentype');font-weight:800;font-display:swap}
h1,h2,h3{font-family:GothicFua,Arial,sans-serif;font-weight:800;-webkit-text-stroke:.65px currentColor}h2{font-size:57px;letter-spacing:-2px;-webkit-text-stroke:1.2px currentColor;line-height:1.1}h3{font-size:21px;letter-spacing:-.55px}.project h3{font-size:18px;line-height:1.12}.person h3{font-size:25px}.contact h2{font-size:55px}
.logo,footer .logo{display:inline-flex;align-items:baseline;position:relative;padding-right:0;-webkit-text-stroke:2.6px currentColor;letter-spacing:-5px;gap:8px;line-height:1}
.logo .logo-mark,footer .logo .logo-mark{position:static;display:inline-block;width:.26em;height:.72em;flex:0 0 .26em;background:none;margin:0;color:#ff008a;font-size:inherit;line-height:0;transform:none;-webkit-text-stroke:0;border-radius:0;vertical-align:baseline}.logo-mark svg{width:100%;height:100%;display:block;overflow:visible}.brand{padding-top:4px}
.title-orbit{left:-19px;top:-15px;width:calc(100% + 38px);height:calc(100% + 32px)}.title-orbit path{stroke-width:6.5;opacity:.88}.title-orbit .marker-overlap{stroke-width:3.5;opacity:.5;animation-delay:.12s}h2:hover .title-orbit .marker-main{stroke-width:7}h2:hover .title-orbit .marker-overlap{stroke-width:3.5}
@media(max-width:800px){h2,.contact h2{font-size:48px}}@media(max-width:520px){.logo{-webkit-text-stroke:2.3px currentColor}h2,.contact h2{font-size:44px;letter-spacing:-1.5px}.title-orbit{left:-13px;width:calc(100% + 26px)}.project h3{font-size:16px}.services h3{font-size:18px}}
.logo .logo-mark,footer .logo .logo-mark{height:.82em}
/* Mouth concept. The paper version is retained in versions/papel. */
h1,h2,h3{font-family:Arial,Helvetica,sans-serif;font-weight:900}h2{letter-spacing:-2.7px;-webkit-text-stroke:2px currentColor;font-size:57px}.contact h2{font-size:55px}h3{-webkit-text-stroke:.5px currentColor;letter-spacing:-.7px}
.title-orbit{display:none}h2:after{content:'';position:absolute;left:0;bottom:-14px;width:100%;height:5px;background:#ff008a;border-radius:50%;transform:none;animation:none}h2:hover:after{animation:underline-swipe .65s ease both}
.logo .logo-mark,footer .logo .logo-mark{height:1em;position:relative;top:.09em;width:.29em;flex-basis:.29em}.logo-mark svg{overflow:visible}
.hero{height:355px;overflow:hidden}.hero>.mouth-stage{position:relative;inset:auto;width:min(960px,100%);height:100%;z-index:0;translate:var(--hero-x,0px) var(--hero-y,0px);transition:translate .65s ease}.talking-mouth{position:absolute;left:1%;top:3%;height:94%;width:55%;overflow:visible}.mouth-shape{transform-box:fill-box;transform-origin:50% 55%;animation:mouth-speak 6.5s ease-in-out infinite}.fua-shout{position:absolute;left:49%;top:26%;font-family:Arial,Helvetica,sans-serif;font-size:clamp(90px,13vw,174px);font-weight:950;letter-spacing:-12px;line-height:1;color:#111;-webkit-text-stroke:4px #111;transform-origin:0 70%;animation:fua-out 6.5s cubic-bezier(.2,.8,.2,1) infinite}.fua-shout span{color:#ff008a;-webkit-text-stroke:4px #ff008a;display:inline-block;margin-left:8px}.mouth-murmur{position:absolute;left:48%;top:37%;font-family:monospace;font-size:30px;letter-spacing:7px;animation:murmur-out 6.5s ease infinite}.mouth-murmur span{display:inline-block;animation:murmur-wiggle .25s ease-in-out infinite alternate}.mouth-murmur span:nth-child(2){animation-delay:.1s}.mouth-murmur span:nth-child(3){animation-delay:.2s}.shout-rays{position:absolute;right:0;top:16%;width:16%;height:62%;color:#ff008a;animation:ray-out 6.5s ease infinite}
@keyframes mouth-speak{0%,6%{transform:scaleY(.38)}10%{transform:scaleY(.38)}14%{transform:scaleY(.36)}18%{transform:scaleY(.42)}22%{transform:scaleY(.4)}27%{transform:scaleY(.48)}31%{transform:scaleY(.42)}38%,55%{transform:scaleY(1)}65%,85%{transform:scaleY(.8)}100%{transform:scaleY(.38)}}
@keyframes fua-out{0%,29%{opacity:0;transform:translate(-110px,20px) scale(.08) rotate(-14deg)}42%{opacity:1;transform:translate(10px,-5px) scale(1.08) rotate(-6deg)}49%,82%{opacity:1;transform:translate(0,0) scale(1) rotate(-4deg)}94%,100%{opacity:0;transform:translate(65px,-12px) scale(1.04) rotate(-2deg)}}
@keyframes murmur-out{0%{opacity:0;transform:translateX(-20px)}8%,27%{opacity:.65}34%,100%{opacity:0;transform:translateX(15px)}}@keyframes murmur-wiggle{to{transform:translateY(-5px)}}
@keyframes ray-out{0%,35%{opacity:0;transform:scale(.5)}45%,80%{opacity:1;transform:scale(1)}92%,100%{opacity:0;transform:scale(1.1)}}
.hero.is-paused .mouth-stage,.hero.is-paused .mouth-stage *{animation-play-state:paused}.hero.is-paused .mouth-stage{translate:0 0}
@media(max-width:800px){h2,.contact h2{font-size:48px}.hero{height:280px}.fua-shout{font-size:100px;letter-spacing:-8px;-webkit-text-stroke:3px #111}.fua-shout span{-webkit-text-stroke:3px #ff008a}.mouth-murmur{font-size:23px}}
@media(max-width:520px){h2,.contact h2{font-size:42px;letter-spacing:-2px}.hero{height:280px}.talking-mouth{left:-2%;top:0;width:64%;height:85%}.fua-shout{left:49%;top:37%;font-size:72px;letter-spacing:-6px}.shout-rays{right:0;top:27%;width:15%;height:40%}.mouth-murmur{left:53%;top:40%;font-size:18px;letter-spacing:4px}}
@media(prefers-reduced-motion:reduce){.mouth-stage *{animation:none!important}.mouth-murmur{display:none}.mouth-shape{transform:scaleY(.9)}.fua-shout{opacity:1;transform:rotate(-4deg)}.shout-rays{opacity:1}h2:hover:after{animation:none}}
.logo .logo-mark,footer .logo .logo-mark{top:.15em}
/* Wordmark: a closer, top-heavy exclamation aligned with the f. */
.logo,footer .logo{align-items:center;gap:3px}.logo .logo-mark,footer .logo .logo-mark{position:static;top:auto;height:.76em;width:.3em;flex-basis:.3em;margin-left:-1px;align-self:center}
h2:after,h2:hover:after{content:none;animation:none}.title-underline{position:absolute;left:0;bottom:-20px;width:100%;height:22px;overflow:visible;pointer-events:none}.title-underline path{fill:none;stroke:#ff008a;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;vector-effect:non-scaling-stroke}.title-underline .marker-stroke{stroke-width:10;opacity:.94}.title-underline .marker-dry{stroke-width:3;opacity:.42}
@media(max-width:520px){.title-underline{bottom:-18px;height:20px}.title-underline .marker-stroke{stroke-width:9}}
.title-underline{bottom:-11px}
@media(max-width:520px){.title-underline{bottom:-10px}}
/* Photographic hero based on the new reference. */
header{height:100px;color:#fff;background:transparent}.brand{padding:0}.brand-tagline{display:none}header nav a:hover{color:#ff008a}header #menu i{background:#fff}
.photo-hero{margin-top:-100px;height:500px;padding:100px 5% 0;background:#000;color:#fff;isolation:isolate;justify-content:flex-start;overflow:hidden}
.photo-hero .photo-hero-art{position:absolute;inset:0;display:block;width:100%;height:100%;max-height:none;object-fit:cover;object-position:center 38%;animation:none!important;transform:none!important;translate:none!important;transition:none;will-change:auto;clip-path:none;z-index:-2}
.photo-hero:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#000b,transparent 29%);z-index:-1;pointer-events:none}
.photo-hero>.photo-hero-copy{position:relative;inset:auto;width:auto;height:auto;z-index:1;align-self:center;margin-top:-5px}.photo-hero-copy h1{font-family:Display,Arial,sans-serif;font-size:38px;font-weight:700;letter-spacing:-.5px;line-height:1.02;-webkit-text-stroke:0;animation:none}.photo-hero-copy p{font-family:Display,monospace;text-transform:uppercase;font-size:15px;letter-spacing:3px;margin:24px 0 58px}.hero-cta{display:flex;align-items:center;justify-content:space-between;gap:30px;width:220px;border:1px solid #ff008a;padding:10px 16px;font-family:Display,sans-serif;font-size:23px;line-height:1;text-transform:uppercase}.hero-cta span{font:30px Arial;line-height:1}.hero-cta:hover{background:#ff008a;color:#fff}
@media(min-width:1500px){.photo-hero{height:580px}}
@media(max-width:800px){header{height:95px}header nav{gap:20px;font-size:14px}.photo-hero{height:400px;margin-top:-95px;padding-top:95px}.photo-hero-copy h1{font-size:29px}.photo-hero-copy p{font-size:12px;letter-spacing:2px;margin:20px 0 36px}.hero-cta{width:177px;font-size:20px;padding:9px 12px}.photo-hero .photo-hero-art{object-position:52% 38%}.photo-hero>.photo-hero-copy{margin-top:0}}
@media(max-width:520px){header{height:90px}header nav{top:90px;background:#080808;border-color:#444}.photo-hero{height:520px;margin-top:-90px;padding:90px 6% 25px;display:flex;align-items:flex-end}.photo-hero .photo-hero-art{height:390px;object-fit:cover;object-position:61% center;inset:25px 0 auto}.photo-hero:after{background:linear-gradient(0deg,#000 5%,#000e 22%,transparent 53%)}.photo-hero>.photo-hero-copy{align-self:flex-end;width:100%;display:grid;grid-template-columns:1fr auto;align-items:end;gap:14px}.photo-hero-copy h1{font-size:28px;grid-column:1}.photo-hero-copy p{font-size:11px;letter-spacing:2px;margin:0;grid-column:1;grid-row:2}.hero-cta{grid-column:2;grid-row:1/3;width:152px;gap:15px;font-size:19px;padding:10px}.photo-hero .photo-hero-copy .hero-cta span{font-size:24px}}
header{background:linear-gradient(#000d,#0007 75%,transparent)}header nav{margin-left:auto;margin-right:45px;gap:28px;font-size:15px}.hero-cta{white-space:nowrap;width:230px;gap:18px;font-size:21px}
@media(max-width:800px){header nav{margin-right:25px;gap:18px;font-size:14px}.hero-cta{width:177px;font-size:18px;gap:14px}}
@media(max-width:520px){header nav{margin:0;font-size:26px;gap:18px}.hero-cta{width:152px;font-size:17px;gap:12px}}
/* Full dark theme and a quiet photographic hero. */
body{background:#050505;color:#f7f7f3}header{color:#fff;background:linear-gradient(#000d,#0007 75%,transparent)}.brand-tagline{display:block;color:#fff;font-size:13px;margin-top:10px;letter-spacing:.7px}header #menu i{background:#fff}.photo-hero{background:#000;color:#fff;height:500px}.photo-hero .photo-hero-art{object-position:center 34%}.photo-hero:after{background:none}.photo-hero .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.section,footer{border-color:#343434}.person,.services article,.contact form,.social{border-color:#343434}.dash{background:#f7f7f3}.fields input,.fields textarea{color:#fff;border-color:#777;color-scheme:dark}.form-note,.social small,.services small,.pending{color:#aaa}.send button{color:#fff}.send button:hover{color:#ff008a;background:#161616}.squareplus{box-shadow:6px -5px 0 -1px #050505,6px -5px #fff;border-color:#fff}.icon{color:#fff}.rings{color:#ff008a;text-shadow:0 -9px #fff}.squares{color:#ff008a;text-shadow:9px -8px #fff,-9px 8px #ff008a}.star{color:#ff008a}.project{color:#f7f7f3}.arrows button{color:#fff}.arrows button:hover{color:#ff008a}dialog{background:#090909;color:#fff;border-color:#555}.close{background:#090909;color:#fff}.person img{object-fit:contain}
@media(min-width:1500px){.photo-hero{height:580px}}@media(max-width:800px){.photo-hero{height:400px}}@media(max-width:520px){header nav{background:#080808;color:#fff;border-color:#333}.photo-hero{height:350px;padding:0}.photo-hero .photo-hero-art{height:100%;inset:0;object-position:59% center}.photo-hero:after{background:none}.brand-tagline{font-size:11px;letter-spacing:.4px}}
.photo-hero .photo-hero-art{visibility:hidden}.inside-mouth-art{position:absolute;inset:0;width:100%;height:100%;z-index:-1;display:block}.photo-hero{isolation:isolate}.spoken-word{text-rendering:geometricPrecision}
@media(max-width:520px){.inside-mouth-art{width:150%;max-width:none;left:-37%;height:100%}}
/* Closer crop: face, mouth and the original lettering grow together. */
.inside-mouth-art{transform:scale(1.2);transform-origin:70% 45%}
@media(max-width:520px){.inside-mouth-art{transform:scale(1.15);transform-origin:65% 45%}}
/* A further 50% increase over the previous close-up. */
.photo-hero{height:750px}.inside-mouth-art{transform:scale(1.8);transform-origin:70% 20%}
@media(min-width:1500px){.photo-hero{height:870px}}
@media(max-width:800px){.photo-hero{height:600px}}
@media(max-width:520px){.photo-hero{height:525px}.inside-mouth-art{transform:scale(1.725);transform-origin:68% 20%}}
/* Center FUA while retaining its relationship with the mouth. */
.inside-mouth-art{transform:translateX(-14%) scale(1.8)}
@media(max-width:520px){.inside-mouth-art{transform:translateX(-8%) scale(1.725)}}
/* Animation experiment; the still design remains frozen at /v1/. */
.word-motion{transform-box:fill-box;transform-origin:0% 60%;animation:word-from-mouth 1.45s cubic-bezier(.16,.8,.25,1) .25s both}.ray-motion{animation:draw-hero-rays .75s cubic-bezier(.25,.6,.3,1) 1.15s both;transform-box:fill-box;transform-origin:left center}
@keyframes word-from-mouth{0%{opacity:0;transform:translate(-75px,20px) scale(.25)}45%{opacity:1}75%{transform:translate(4px,-2px) scale(1.025)}100%{opacity:1;transform:translate(0,0) scale(1)}}
@keyframes draw-hero-rays{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
.hero-replay{position:absolute;bottom:22px;right:5%;z-index:2;width:34px;height:34px;background:#0009;border:1px solid #ff008a;border-radius:50%;color:#ff008a;font:25px Arial;line-height:1;display:grid;place-items:center;padding:0}.hero-replay:hover{background:#ff008a;color:#000}
@media(prefers-reduced-motion:reduce){.word-motion,.ray-motion{animation:none}.hero-replay{display:none}}

/* Large project carousel */
#trabajos{overflow:hidden}
#trabajos .projects{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;position:relative;padding:0 0 8px;grid-template-columns:none}
#trabajos .projects::-webkit-scrollbar{display:none}
#trabajos .project{display:block;flex:0 0 88%;min-width:0;scroll-snap-align:start;text-align:left;background:transparent;color:inherit;border:0;padding:0;cursor:pointer}
#trabajos .project img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;max-height:none}
#trabajos .project-caption{display:flex;justify-content:space-between;gap:20px;padding:18px 0 10px}
#trabajos .project h3{font-size:clamp(22px,2.6vw,38px);margin:0 0 6px}
#trabajos .project p{font-size:14px;line-height:1.5;margin:0}
#trabajos .arrows{display:flex;align-items:center;justify-content:flex-end;gap:18px;margin-top:12px}
#trabajos .carousel-count{font-size:13px;letter-spacing:2px;margin-right:auto;color:#aaa}
#trabajos .carousel-pause{font-size:20px}
#trabajos .projects:focus-visible{outline:2px solid #ff008a;outline-offset:5px}
#trabajos .project:last-child{margin-right:12%}
@media(max-width:600px){#trabajos .project{flex-basis:94%}#trabajos .projects{gap:14px}#trabajos .project-caption{display:block;padding-top:12px}#trabajos .project-caption>p{margin-top:8px;color:#aaa}#trabajos .project:last-child{margin-right:6%}}

/* Continuous film strip with captions inside each frame. */
#trabajos .projects{scroll-snap-type:none;scroll-behavior:auto;gap:24px;padding-bottom:0;overscroll-behavior-x:contain}
#trabajos .project{position:relative;aspect-ratio:16/9;overflow:hidden;isolation:isolate}
#trabajos .project img,#trabajos .project video{width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
#trabajos .project-caption{position:absolute;inset:auto 0 0;z-index:1;padding:90px 30px 26px;background:linear-gradient(transparent,rgba(0,0,0,.84));color:white;align-items:flex-end;pointer-events:none;text-shadow:0 1px 10px #000}
#trabajos .project:last-child{margin-right:0}
#trabajos .project h3{font-size:clamp(22px,3vw,40px)}
@media(max-width:600px){#trabajos .project-caption{padding:55px 16px 16px}#trabajos .project h3{font-size:20px}#trabajos .project p{font-size:11px}#trabajos .project-caption>p{margin-top:4px;color:#eee}#trabajos .project:last-child{margin-right:0}}

/* Spacious editorial service layout: three above, two below. */
#servicios{padding-top:70px;padding-bottom:80px}
#servicios .services-head{justify-content:space-between;align-items:flex-end;margin-bottom:64px;gap:35px}
#servicios .services-head p{font-size:clamp(16px,1.7vw,22px);line-height:1.5;max-width:430px;margin:0}
#servicios .services{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}
#servicios .services article{grid-column:span 2;position:relative;min-height:310px;padding:34px 30px 30px;border:1px solid #343434;background:#0b0b0b;overflow:hidden;transition:border-color .3s,background .3s}
#servicios .services article:nth-child(n+4){grid-column:span 3;min-height:280px}
#servicios .services article:hover{border-color:#ff008a;background:#111}
#servicios .services small{position:absolute;top:30px;right:28px;font:13px monospace;letter-spacing:2px;color:#888}
#servicios .service-symbol{display:block;width:76px;height:72px;margin:0 0 42px;fill:none;stroke:#ff008a;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s}
#servicios article:hover .service-symbol{transform:rotate(-7deg) translateY(-3px)}
#servicios .service-dot{fill:#ff008a;stroke:none}
#servicios .services h3{font-family:Arial,Helvetica,sans-serif;font-weight:900;font-size:clamp(25px,2.7vw,40px);text-transform:none;letter-spacing:-1.2px;line-height:1.05;margin:0 0 16px}
#servicios .services p{font-size:16px;line-height:1.55;max-width:300px;margin:0;color:#bdbdbd}
@media(max-width:900px){#servicios .services{grid-template-columns:repeat(2,minmax(0,1fr))}#servicios .services article,#servicios .services article:nth-child(n+4){grid-column:span 1;min-height:290px}#servicios .services article:last-child{grid-column:1/-1}#servicios .services-head{align-items:flex-start}#servicios .services-head p{max-width:350px}}
@media(max-width:560px){#servicios{padding-top:45px;padding-bottom:45px}#servicios .services-head{gap:25px;margin-bottom:36px}#servicios .services{gap:12px}#servicios .services article,#servicios .services article:nth-child(n+4){padding:25px 18px;min-height:265px}#servicios .services small{top:22px;right:16px;font-size:11px}#servicios .service-symbol{width:56px;height:54px;margin-bottom:42px}#servicios .services h3{font-size:23px;letter-spacing:-.8px}#servicios .services p{font-size:13px}#servicios .services article:last-child{min-height:210px}#servicios .services article:last-child .service-symbol{margin-bottom:20px}}
@media(prefers-reduced-motion:reduce){#servicios article:hover .service-symbol{transform:none}}

/* Desktop: one complete viewport per main section. */
@media(min-width:901px){
html{scroll-padding-top:0}
header{position:absolute;top:0;left:0;width:100%;z-index:5}
#inicio.photo-hero{height:100svh;min-height:650px}
#trabajos,#servicios{height:100svh;min-height:700px;display:flex;flex-direction:column;justify-content:center;scroll-margin-top:0;padding-top:36px;padding-bottom:36px}
#trabajos .section-head{margin-bottom:28px;flex-shrink:0}
#trabajos .projects{flex-shrink:0}
#trabajos .project{flex-basis:min(88%,calc((100svh - 235px)*16/9));height:min(60svh,calc(100svh - 235px));aspect-ratio:16/9}
#trabajos .arrows{flex-shrink:0}
#servicios .services-head{margin-bottom:30px;flex-shrink:0}
#servicios .services{gap:16px;flex:0 1 auto}
#servicios .services article,#servicios .services article:nth-child(n+4){min-height:0;height:clamp(215px,28svh,310px);padding:25px 28px}
#servicios .service-symbol{width:60px;height:56px;margin-bottom:22px}
#servicios .services h3{font-size:clamp(25px,2.6vw,38px);margin-bottom:12px}
#servicios .services p{font-size:15px}
}

#servicios .services article:nth-child(-n+2){grid-column:span 3}
#servicios .services article:nth-child(n+3){grid-column:span 2}
#servicios .services h3{font-size:clamp(23px,2.5vw,36px)}
.intro .inline-brand{display:inline-flex;align-items:baseline;font-size:32px;letter-spacing:-2.5px;line-height:1;vertical-align:baseline;-webkit-text-stroke:0}
.intro .inline-brand .logo-mark{position:static;display:inline-block;width:9px;height:27px;margin-left:2px;transform:none;align-self:center}
.intro .inline-brand .logo-mark svg{width:100%;height:100%}
.person img{animation:portrait-breathe 4s ease-in-out infinite;transform-origin:center bottom}
.person:nth-of-type(2) img{animation-delay:-2s}
@keyframes portrait-breathe{0%,100%{transform:translateY(0) rotate(-1deg) scale(1)}50%{transform:translateY(-5px) rotate(1deg) scale(1.025)}}
@media(max-width:900px){#servicios .services{grid-template-columns:repeat(6,minmax(0,1fr))}#servicios .services article:nth-child(-n+2){grid-column:span 3}#servicios .services article:nth-child(n+3){grid-column:span 2}#servicios .services h3{font-size:22px}#servicios .services article{padding:25px 18px}}
@media(max-width:560px){#servicios .services{grid-template-columns:repeat(2,minmax(0,1fr))}#servicios .services article:nth-child(n){grid-column:span 1}#servicios .services article:last-child{grid-column:1/-1}#servicios .services h3{font-size:21px}}
@media(prefers-reduced-motion:reduce){.person img{animation:none}}

/* Final section composition and interaction refinements. */
#inicio.photo-hero{height:100svh;min-height:0}
@media(max-width:900px){header{position:absolute;top:0;left:0;width:100%}}
#servicios .services article:hover{background:#ff008a;border-color:#ff008a;color:#050505}
#servicios .services article:hover p,#servicios .services article:hover small{color:#111}
#servicios .services article:hover .service-symbol{stroke:#111}
#servicios .services article:hover .service-dot{fill:#111}
#nosotros .person{border-left:0}
.section,footer{border-top:0}
#contacto form,#contacto .social{border:0}
#contacto .send button{width:110px;padding:9px 18px;justify-content:center;font-size:18px;min-height:0}
footer .social{border:0;padding:0;flex-direction:row;align-items:center;gap:25px}
footer .social small{display:block;font-size:10px}
@media(min-width:901px){
.about-contact-screen{min-height:100svh;display:flex;flex-direction:column;justify-content:center;gap:45px;padding:45px 0}
#nosotros{flex:0 0 auto;padding-top:0;padding-bottom:0}
#contacto{flex:0 0 auto;padding-top:0;padding-bottom:0}
#nosotros .intro>p{margin-top:30px}
#nosotros .person{margin-top:0;margin-bottom:0}
#nosotros .person img{margin-top:0;height:125px}
#nosotros .person p{font-size:13px;line-height:1.45}
}
@media(max-width:700px){footer{height:auto;min-height:110px;gap:25px;flex-wrap:wrap}footer .social{order:3;width:100%;gap:18px;flex-wrap:wrap}footer .social small{width:100%}}

/* Full browser height, including the narrow desktop preview. */
#inicio.photo-hero{height:100vh;height:100dvh;min-height:100vh;min-height:100dvh;margin:0;flex-shrink:0}
header{position:absolute;inset:0 0 auto;width:100%}
footer .logo{margin-left:auto;order:2}
footer .social{order:1;width:auto}
@media(min-width:901px){.about-contact-screen{min-height:100vh;min-height:100dvh;gap:clamp(80px,12vh,150px);padding:60px 0;justify-content:center}}
@media(max-width:900px){.about-contact-screen{min-height:100dvh;padding:55px 0;display:flex;flex-direction:column;gap:90px}#nosotros,#contacto{padding-top:0;padding-bottom:0}}
@media(max-width:520px){header{height:auto;min-height:100px;align-items:flex-start;gap:15px}header nav{display:flex;position:static;flex-direction:row;flex-wrap:wrap;justify-content:flex-end;gap:8px 14px;padding:10px 0;background:transparent;border:0;font-size:13px;max-width:210px}footer .social{width:auto;max-width:65%;font-size:11px}}

/* Section dividers and contact alignment. */
#servicios,.about-contact-screen{border-top:1px solid #343434}
#contacto #brief{margin-top:24px;grid-template-columns:minmax(0,1fr);gap:15px;align-self:start;max-width:100%}
#contacto #brief .fields{width: min(100%,390px)}
#contacto #brief .send{display:flex;align-items:flex-start;flex-direction:column;gap:8px;margin-top:8px}
#contacto #brief .send button{align-self:flex-start}
#contacto #brief .form-note{max-width:300px;margin:0}
@media(min-width:901px){#contacto{grid-template-columns:1fr 1.9fr;gap:40px}#contacto #brief .fields{width: min(100%,390px)}}

#trabajos .section-head>p{max-width:420px;margin-top:0;text-align:left;line-height:1.55}
.work-intro-lead{display:block;font-weight:700;margin-bottom:7px}
.work-intro-detail{display:block;color:#aaa;font-size:14px}
#contacto #brief{margin-top:40px}
#contacto #brief .send button{width:86px;padding:7px 12px;font-size:16px;min-height:34px;align-self:flex-start}
#contacto #brief .send{width:min(100%,390px);margin-top:4px}
@media(max-width:600px){#contacto #brief{margin-top:16px}.work-intro-detail br{display:none}}

.hero-logo-a{font-family:Arial,sans-serif;font-weight:900;font-size:205px;fill:#ff008a;stroke:#ff008a;stroke-width:7px;paint-order:stroke fill;letter-spacing:-5px}

/* Mobile composition: natural photo proportions and full lettering. */
@media(max-width:900px){
header{height:auto;min-height:130px;padding:16px 6%;display:flex;flex-wrap:wrap;align-items:flex-start;gap:22px}
header .brand{width:100%}
header nav{position:static;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:center;width:100%;max-width:none;gap:12px;padding:0;margin:0;background:transparent;border:0;font-size:clamp(12px,2.5vw,16px)}
header nav a{white-space:nowrap;flex-shrink:0}
#inicio .inside-mouth-art{inset:auto;top:clamp(160px,25vh,210px);left:-58%;width:165%;height:auto;aspect-ratio:3/2;max-width:none;transform:none;transform-origin:center;overflow:hidden}
}

/* Phone hero: oversized mouth and lettering, with a compact complete header. */
@media(max-width:600px){
#inicio.photo-hero{height:100svh;min-height:650px}
header{padding:18px 6%;gap:24px;min-height:140px}
header .brand{width:auto}
header .logo{font-size:57px}
header .brand-tagline{font-size:11px;margin-top:6px}
header nav{width:100%;font-size:clamp(12px,3.5vw,16px);gap:8px;justify-content:space-between}
#inicio .inside-mouth-art{top:clamp(145px,22svh,200px);left:-145%;width:290%;height:auto;aspect-ratio:3/2;transform:none;overflow:hidden}
.hero-replay{right:6%;bottom:20px}
}
@media(max-width:360px){header nav{font-size:12px}#inicio .inside-mouth-art{left:-140%;width:282%}}

@media(max-width:900px){#trabajos .project{aspect-ratio:1/1;height:auto}#trabajos .project img,#trabajos .project video{aspect-ratio:1/1;width:100%;height:100%;object-fit:cover}}

/* All five services within one phone screen. */
@media(max-width:900px){
#servicios{height:100svh;min-height:0;padding:24px 6%;display:flex;flex-direction:column;justify-content:flex-start;scroll-margin-top:0}
#servicios .services-head{flex:0 0 auto;margin-bottom:26px;gap:0}
#servicios h2{font-size:38px}
#servicios .services{flex:1;min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:10px}
#servicios .services article:nth-child(n){grid-column:span 1;min-height:0;height:auto;padding:14px 15px}
#servicios .services article:last-child{grid-column:1/-1}
#servicios .services small{top:13px;right:12px;font-size:10px;letter-spacing:1px}
#servicios .service-symbol{width:32px;height:30px;margin:0 0 12px}
#servicios .services h3{font-size:19px;line-height:1.08;letter-spacing:-.5px;margin:0 0 8px}
#servicios .services p{font-size:12px;line-height:1.35;margin:0;max-width:290px}
#servicios .services article:last-child .service-symbol{margin-bottom:12px}
}
@media(max-width:900px) and (max-height:650px){#servicios{padding-top:18px;padding-bottom:18px}#servicios .services-head{margin-bottom:20px}#servicios .services article:nth-child(n){padding:11px 13px}#servicios .service-symbol{width:26px;height:24px;margin-bottom:8px}#servicios .services h3{font-size:17px;margin-bottom:6px}#servicios .services p{font-size:11px}}

/* Vimeo films: silent previews in the carousel; full playback on selection. */
#trabajos .project{background:#141414}
.video-preview{display:block;position:absolute;inset:0;overflow:hidden;background:radial-gradient(ellipse at center,#252525,#080808)}
.video-preview iframe{position:absolute;width:100%;height:100%;inset:0;border:0;pointer-events:none}
.project-play{position:absolute;left:26px;top:24px;border:1px solid #ffffff90;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:15px;color:#fff;background:#0005;z-index:1}
#trabajos .project:hover .project-play{background:#ff008a;border-color:#ff008a}
#detail{width:min(1100px,94vw);padding:42px 24px 24px;max-height:94dvh;overflow:auto}
.detail-video-wrap{position:relative;aspect-ratio:16/9;margin-bottom:20px;background:#000}
#detail-video{width:100%;height:100%;border:0;position:absolute;inset:0}
#detail-link{display:inline-block;font-size:13px;border-bottom:1px solid #ff008a;padding-bottom:4px}
@media(max-width:900px){.video-preview iframe{width:177.778%;left:-38.889%;height:100%}.project-play{width:34px;height:34px;left:16px;top:16px;font-size:12px}#detail{padding:38px 12px 20px}#detail h3{font-size:25px}}

/* Derive desktop film height from width so the frame is always 16:9. */
@media(min-width:901px){
#trabajos .projects{align-items:flex-start}
#trabajos .project{flex:0 0 auto;width:min(88%,calc(min(60svh,calc(100svh - 235px))*16/9));height:auto;aspect-ratio:16/9}
.video-preview iframe{width:100%;height:100%;left:0;top:0}
}

/* Fill the carousel frame for the two older Volkswagen films. */
#projects .project[data-vimeo="310621540"] .video-preview iframe,
#projects .project[data-vimeo="310625675"] .video-preview iframe{transform:scale(1.2);transform-origin:50% 50%}

#trabajos .project h3{font-size:clamp(11px,1.5vw,20px)}
@media(max-width:600px){#trabajos .project h3{font-size:10px}}

@media(prefers-reduced-motion:no-preference){.scroll-underline .marker-stroke,.scroll-underline .marker-dry{stroke-dasharray:1;stroke-dashoffset:1}}

/* Original V1 lettering, revealed one glyph at a time. */
.letter-from-mouth{transform-box:view-box;transform-origin:265px 245px;animation:v1-letter-emerge .8s cubic-bezier(.16,.8,.25,1) both}
.letter-f{animation-delay:.3s}.letter-u{animation-delay:.75s}.letter-a{animation-delay:1.2s}.letter-bang{animation-delay:1.65s}
@keyframes v1-letter-emerge{0%{opacity:0;transform:translate(-45px,16px) scale(.25)}65%{opacity:1;transform:translate(2px,-2px) scale(1.025)}100%{opacity:1;transform:translate(0,0) scale(1)}}
#inicio .ray-motion{animation-delay:2.1s}
@media(prefers-reduced-motion:reduce){.letter-from-mouth{animation:none}}

/* Faster reverse reveal: !, A, U, F. */
.letter-from-mouth{animation-duration:.4s}
.letter-bang{animation-delay:.1s}.letter-a{animation-delay:.28s}.letter-u{animation-delay:.46s}.letter-f{animation-delay:.64s}
#inicio .ray-motion{animation-delay:.95s;animation-duration:.4s}

#trabajos .video-preview .video-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;margin:0;transform:none;filter:none}
.video-preview iframe{opacity:0;transition:opacity .25s}
.video-preview.preview-playing iframe{opacity:1}

/* Direct email contact */
.contact-email{display:block;width:fit-content;margin-top:30px;color:#f7f7f3;font-family:Arial,Helvetica,sans-serif;font-size:clamp(17px,1.7vw,24px);line-height:1.4;letter-spacing:0;text-decoration:underline;text-decoration-color:#ff008a;text-underline-offset:7px;overflow-wrap:anywhere}.contact-email:hover,.contact-email:focus-visible{color:#ff008a}
/* Email at the right edge of the contact section. */
#contacto>.contact-email{justify-self:end;align-self:start;margin-top:40px;text-align:right;font-size:clamp(17px,1.65vw,23px)}
@media(min-width:901px){#contacto{grid-template-columns:minmax(180px,1fr) minmax(280px,1.4fr) auto;gap:30px}}
@media(max-width:900px){#contacto>.contact-email{margin-top:16px;margin-left:auto;align-self:flex-end}}