*{box-sizing:border-box} :root{--green:#8df442;--purple:#932cc4;--ink:#14231a;--cream:#f6f5ed;--fit:1}body{margin:0;height:100vh;height:100dvh;overflow:hidden;background:#101e16;color:var(--ink);font-family:Arial,Helvetica,sans-serif;display:grid;place-items:center;background-image:radial-gradient(ellipse at 15% 15%,#446238 0,transparent 48%),radial-gradient(ellipse at 90% 90%,#462653 0,transparent 45%)}body:before{content:"";position:fixed;inset:0;opacity:.15;background:repeating-linear-gradient(125deg,transparent 0 58px,#b1ff7317 59px 60px);pointer-events:none}.svg-defs{position:absolute;width:0;height:0;overflow:hidden}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid #be5df0;outline-offset:3px}.stage{width:480px;height:850px;transform:scale(var(--fit));flex-shrink:0;transform-origin:center}.card{width:480px;height:850px;overflow:hidden;background:var(--cream);border-radius:26px;box-shadow:0 30px 100px #0009;border:1px solid #fff4;display:grid;grid-template-rows:245px 398px 207px}.hero{position:relative;padding:20px 22px 0;overflow:hidden;background:radial-gradient(ellipse at 10% 0,#e5ffc8,transparent 60%),var(--cream)}.topline{display:flex;justify-content:space-between;font-size:8px;font-weight:900;letter-spacing:1.1px}.live{display:flex;align-items:center;gap:5px}.live:before{content:"";width:5px;height:5px;background:#399820;border-radius:50%;box-shadow:0 0 0 4px #7ceb3829;animation:blink 2.5s infinite}.hero-content{display:flex;align-items:center;height:176px;position:relative;z-index:2}.brand{width:208px;height:190px;object-fit:contain;filter:drop-shadow(0 8px 5px #15251b12)}.headline{padding-left:17px;border-left:1px solid #23381b20;margin-left:9px}.headline>span{font-size:10px;font-weight:900;letter-spacing:2px}.headline strong{display:block;font-size:34px;line-height:.95;letter-spacing:-1.8px;font-weight:1000;margin-top:8px}.headline em{font-style:normal;color:var(--purple);font-size:26px;letter-spacing:-1.3px}.headline p{font-size:11px;line-height:1.45;margin:10px 0 0;color:#50604e}.swoosh{position:absolute;background:var(--green);width:560px;height:48px;bottom:-9px;left:-50px;transform:rotate(-5deg);border-top:3px solid var(--ink)}.hero-bottom{position:absolute;bottom:12px;left:22px;right:22px;display:flex;justify-content:space-between;font-size:8px;letter-spacing:1px;font-weight:900;z-index:3}.hero-bottom b{background:var(--purple);color:white;padding:7px 10px;transform:rotate(-6deg);margin-top:-13px;border:2px solid var(--cream);box-shadow:3px 3px 0 var(--ink)}.work{background:var(--ink);color:white;padding:18px 22px 13px;position:relative}.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.section-head h1{font-size:21px;letter-spacing:-.7px;margin:0;font-weight:900}.section-head em{font-style:normal;color:var(--green)}.section-head>span{font-size:7px;letter-spacing:1.3px;color:#b6c8a9}.work-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:20px}.photos{height:303px;position:relative;overflow:hidden;border-radius:13px;background:#203326}.photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .75s ease,transform 4.3s linear;transform:scale(1.04);visibility:hidden}.photo.active{opacity:1;visibility:visible;transform:scale(1)}.photos:after{content:"";position:absolute;inset:55% 0 0;background:linear-gradient(transparent,#000b);pointer-events:none}.expand{position:absolute;z-index:3;right:10px;top:10px;width:36px;height:36px;display:grid;place-items:center;border-radius:9px;color:white;background:#15251bc9;border:1px solid #ffffff70}.expand svg{width:19px}.photo-caption{position:absolute;z-index:2;bottom:16px;left:13px}.photo-caption small{display:block;font-size:7px;letter-spacing:1.8px;color:var(--green);margin-bottom:5px}.photo-caption strong{font-size:15px}.gallery-bottom{display:flex;align-items:center;gap:9px;height:27px}.dots{display:flex;gap:5px;margin-right:auto}.dots button{border:0;background:#617158;width:6px;height:6px;padding:0;border-radius:9px;transition:width .4s}.dots button.active{background:var(--green);width:22px}#count{font-size:8px;letter-spacing:1px;color:#bbceb0}.pause{background:none;border:0;color:var(--green);padding:4px;font-size:13px}.progress{height:2px;background:#ffffff1a;overflow:hidden}.progress i{display:block;width:100%;height:100%;background:var(--green);transform-origin:left;animation:progress 4s linear infinite}.paused .progress i{animation-play-state:paused}.service-title>span{font-size:7px;letter-spacing:1.7px;color:#b8c7ae}.service-title h2{font-size:23px;line-height:1.05;letter-spacing:-.7px;margin:5px 0 12px}.service-title em{font-style:normal;color:#d6a1ef}.services ul{padding:0;margin:0;list-style:none}.services li{font-size:11px;font-weight:600;border-bottom:1px solid #ffffff12;padding:6px 0;display:flex;align-items:center;gap:7px}.services li:before{content:"↗";font-size:10px;color:var(--green)}footer{padding:13px 22px 0;background:var(--cream)}.contact-heading{display:flex;justify-content:space-between;align-items:center;font-size:8px;letter-spacing:1.6px;font-weight:800;margin-bottom:8px}.contact-heading>span:last-child{font-size:18px;line-height:12px;color:var(--purple)}.call{display:flex;align-items:center;gap:11px;background:var(--purple);color:#fff;height:70px;border-radius:12px;padding:12px 14px;position:relative;overflow:hidden;animation:callPulse 3s ease-in-out infinite}.call:after{content:"";position:absolute;inset:-80% auto -80% -50%;width:25%;background:linear-gradient(90deg,transparent,#fff3,transparent);transform:rotate(20deg);animation:shine 5s infinite}.phone-icon{width:40px;height:40px;background:#ffffff20;border-radius:50%;display:grid;place-items:center}.phone-icon svg{animation:ring 4s ease-in-out infinite}.call small{font-size:8px;font-weight:800;letter-spacing:1.5px;display:block;margin-bottom:3px}.call strong{font-size:27px;letter-spacing:-.7px}.call-arrow{margin-left:auto;width:23px}.secondary{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:9px}.secondary a{height:43px;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:9px;font-size:12px;font-weight:800;border:1px solid #bed0b3}.secondary svg{width:19px}.whatsapp{background:#d5f7bd}.email{background:#fff}.closing{display:flex;justify-content:space-between;align-items:center;font-size:7px;letter-spacing:1px;margin-top:8px}.closing b{color:var(--purple)}.mini-claw{font-size:20px;font-weight:1000;letter-spacing:-4px;transform:skew(-15deg);color:var(--purple);line-height:15px}.intro{position:fixed;inset:0;display:grid;place-items:center;background:var(--cream);z-index:20;animation:introExit .6s 1.8s both;pointer-events:none}.intro-center{position:relative;text-align:center}.intro img{width:min(65vw,290px);position:relative;animation:logoEnter 1s both}.intro p{font-size:9px;letter-spacing:2px;font-weight:900;margin:18px 0}.intro-line{height:3px;background:linear-gradient(90deg,var(--green) 65%,var(--purple) 65%);transform-origin:left;animation:line 1.5s both}.claws{position:absolute;inset:-20% -10%;display:flex;gap:25px;transform:rotate(24deg);justify-content:center;opacity:.17}.claws i{width:30px;height:100%;background:var(--purple);clip-path:polygon(60% 0,100% 0,35% 100%,0 100%);animation:line .65s both}.claws i:nth-child(2){animation-delay:.1s}.claws i:nth-child(3){animation-delay:.2s}.card{animation:cardEnter .8s 1.7s both}dialog{position:fixed;inset:0;width:min(94vw,900px);height:92dvh;max-height:none;border:1px solid #ffffff33;border-radius:16px;background:#102017;padding:50px 12px 65px;color:white;overflow:hidden}dialog::backdrop{background:#031006ed;backdrop-filter:blur(12px)}dialog>img{height:100%;width:100%;object-fit:contain}.close{position:absolute;right:12px;top:9px;font-size:29px;background:none;border:0;color:white;width:38px;height:38px}.viewer-nav{position:absolute;bottom:12px;left:15px;right:15px;display:flex;justify-content:space-between;align-items:center;gap:12px}.viewer-nav button{background:var(--green);border:0;border-radius:50%;width:36px;height:36px;font-size:21px}.viewer-nav p{font-size:12px}@keyframes blink{50%{box-shadow:0 0 0 7px #7ceb3800}}@keyframes progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes callPulse{50%{box-shadow:0 0 0 5px #932cc41a}}@keyframes ring{0%,20%,100%{transform:rotate(0)}5%,15%{transform:rotate(-15deg)}10%{transform:rotate(15deg)}}@keyframes shine{0%,65%{left:-50%}100%{left:140%}}@keyframes introExit{to{opacity:0;visibility:hidden}}@keyframes logoEnter{from{opacity:0;transform:translateY(15px) scale(.86)}to{opacity:1;transform:none}}@keyframes line{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}@keyframes cardEnter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.intro{display:none}.photo{transform:none}}

/* Viewport centering: the wrapper always matches the visible area. */
html,body{width:100%;height:100%;min-width:0;min-height:0;margin:0;overflow:hidden}
body{display:block}
.stage{position:fixed;inset:0;width:100%;height:100%;margin:0;padding:0;display:flex;align-items:center;justify-content:center;transform:none;overflow:hidden}
.card{flex:0 0 480px;width:480px;height:850px;margin:0;transform:scale(var(--fit));transform-origin:center center;grid-template-rows:245px 398px 205px;animation:cardReveal .8s 1.7s both}
.work-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.services,.gallery,.headline{min-width:0}
.services li{padding:5px 0}
@keyframes cardReveal{from{opacity:0}to{opacity:1}}
.hero-bottom > span:first-child {
  position: relative;
  top: 8px;
}