@import url('https://fonts.googleapis.com/css2?family=Lilita+One&family=DM+Sans:wght@400;500;600;700;800&display=swap');
:root{--paper:#fcfcfa;--ink:#20231f;--accent:#13b994;--pink:#ff668b;--yellow:#ffce42}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',Arial,sans-serif}body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:3;opacity:.58;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath d='M0 1h8M0 5h8' stroke='%23b5b7b2' stroke-opacity='.19'/%3E%3Cpath d='M1 0v8M5 0v8' stroke='%23b5b7b2' stroke-opacity='.17'/%3E%3Cpath d='M0 2h3M4 6h3M2 4v3M6 0v3' stroke='%23ffffff' stroke-opacity='.9'/%3E%3C/svg%3E");}body{background-image:radial-gradient(ellipse at 20% 25%,#fff 0%,transparent 60%),linear-gradient(115deg,transparent 20%,#e9eae530 45%,#ffffff70 53%,transparent 70%)}.page{max-width:1600px;margin:auto}.header{margin:0 6%;height:106px;border-bottom:1px solid #20231f40;display:flex;justify-content:space-between;align-items:center}.wordmark{font-size:30px;font-weight:800;letter-spacing:-1.8px;color:var(--ink);text-decoration:none}.wordmark span{font-weight:500}.wordmark i{font-style:normal;color:#009e79;font-size:37px;vertical-align:middle;margin-left:10px}.status{font-size:10px;font-weight:800;letter-spacing:1.6px;display:flex;align-items:center;gap:9px}.status>span{width:8px;height:8px;background:var(--accent);border:1px solid var(--ink);border-radius:50%}.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:5%;align-items:center;padding:67px 6% 75px}.eyebrow{font-size:10px;letter-spacing:1.5px;font-weight:800;line-height:1.6}.eyebrow>span{color:#008f6d;margin-right:6px;font-size:19px;vertical-align:middle}h1{font-family:'Lilita One',Impact,sans-serif;font-size:clamp(60px,6.5vw,100px);font-weight:400;letter-spacing:-1.7px;line-height:.94;margin:24px 0 29px}.highlight{position:relative;color:#008665;display:inline-block}.highlight svg{position:absolute;left:0;bottom:-13px;width:100%;height:16px;stroke:#008665;stroke-width:4;fill:none}.intro{max-width:405px;font-size:15px;line-height:1.8;color:#575952;margin-top:32px}.coming{display:flex;align-items:center;gap:13px;margin-top:29px}.coming>span:first-child{border:2px solid var(--ink);padding:14px 23px;border-radius:7px;background:var(--yellow);font-size:12px;font-weight:800;letter-spacing:1.6px;box-shadow:4px 4px 0 var(--ink);transform:rotate(-2deg)}.handwritten{font-family:Georgia,serif;font-style:italic;font-size:18px;transform:rotate(-8deg)}.art{position:relative;min-height:505px;display:flex;align-items:center;justify-content:center;padding-bottom:36px}.orbit{position:absolute;width:440px;max-width:105%;aspect-ratio:1;border-radius:50%;border:1px dashed #20231f60;transform:rotate(-18deg)}.logo-card{width:330px;max-width:79%;border:2px solid var(--ink);border-radius:13px;background:var(--accent);transform:rotate(7deg);box-shadow:10px 10px 0 var(--ink);overflow:hidden;transition:background .3s,transform .3s}.logo-stage{aspect-ratio:1;display:flex;align-items:center;justify-content:center;overflow:hidden}.logo-card img{display:block;width:125%;height:auto;flex-shrink:0}.card-top,.card-bottom{display:flex;justify-content:space-between;align-items:center;font-size:9px;font-weight:800;letter-spacing:1.4px;padding:15px 18px}.card-top{border-bottom:1px solid #20231f60}.card-bottom{border-top:1px solid #20231f60}.card-bottom>span:last-child{font-size:22px;line-height:16px}.sticker{position:absolute;border:2px solid var(--ink);z-index:1;box-shadow:3px 4px 0 var(--ink);text-align:center;font-weight:800}.sticker-pink{background:var(--pink);left:0;top:50px;padding:15px 22px;font-size:22px;line-height:1.05;transform:rotate(-13deg);border-radius:50%}.sticker-yellow{background:var(--yellow);right:-8px;bottom:91px;width:106px;height:106px;border-radius:50%;font-size:31px;line-height:1;padding-top:24px;transform:rotate(13deg)}.sticker-yellow small{font-size:9px;letter-spacing:.2px}.spark{position:absolute;font-size:60px;line-height:1}.spark-one{right:0;top:10px;color:#008665;transform:rotate(12deg)}.spark-two{left:10px;bottom:98px;font-size:48px}.palette{position:absolute;bottom:-5px;display:flex;align-items:center;gap:15px}.palette>span{font-size:12px;font-weight:500}.swatches{display:flex;gap:9px}.swatch{width:24px;height:24px;border:1.5px solid var(--ink);border-radius:50%;background:var(--swatch);cursor:pointer;position:relative;transition:transform .2s}.swatch:hover{transform:translateY(-3px)}.swatch.active:after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--ink)}button:focus-visible,a:focus-visible{outline:3px solid #1268bb;outline-offset:5px}.ribbon{background:var(--ink);color:var(--paper);overflow:hidden;transform:rotate(-1.3deg);padding:19px 0}.ribbon>div{display:flex;justify-content:space-around;align-items:center;gap:30px;white-space:nowrap;font-size:15px;letter-spacing:1.8px;font-weight:800;min-width:1130px}.ribbon span{color:var(--yellow);font-size:23px}.services{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:34px;margin:0 6%;padding:59px 0 48px;border-bottom:1px solid #20231f40}.services-heading .eyebrow{font-size:9px;margin:0 0 12px;color:#627063}h2{font-size:26px;letter-spacing:-1px;line-height:1.15;margin:0}.service{border-left:1px solid #20231f35;padding-left:25px}.number{font-size:11px;color:#008665;font-weight:800}h3{font-size:15px;margin:12px 0 9px}.service p{font-size:12px;line-height:1.8;color:#575952;margin:0}footer{margin:0 6%;padding:23px 0 28px;display:flex;align-items:center;gap:22px}.footer-brand{font-weight:800;font-size:18px;letter-spacing:-.7px}.footer-brand span{color:#008665;margin-left:4px}footer p{font-size:12px;color:#686a60}.footer-note{margin-left:auto;font-size:9px;font-weight:700;letter-spacing:1.2px}@media(min-width:1500px){.hero{padding-top:85px;padding-bottom:90px}.art{transform:scale(1.1)}}@media(max-width:1000px){.hero{gap:3%;padding-top:45px}h1{font-size:66px}.art{min-height:470px}.sticker-yellow{right:-5px}.sticker-pink{left:-6px}.coming{gap:8px}.coming svg{width:45px}.handwritten{font-size:16px}.services{gap:20px}.service{padding-left:17px}}@media(max-width:720px){.header{height:80px}.wordmark{font-size:25px}.wordmark i{font-size:30px}.status{font-size:8px;letter-spacing:.6px;gap:6px}.hero{grid-template-columns:1fr;padding-top:29px;padding-bottom:37px;gap:23px}.eyebrow{font-size:9px;letter-spacing:.8px}h1{font-size:clamp(48px,12.1vw,80px);margin-top:19px;letter-spacing:-1.8px}.intro{font-size:14px;max-width:450px}.coming{margin-top:23px;gap:14px}.coming>span:first-child{font-size:11px;padding:13px 18px}.coming svg{width:55px}.art{width:100%;max-width:430px;margin:12px auto 0;min-height:465px}.logo-card{width:300px}.sticker-pink{left:0;top:35px;font-size:20px}.spark-one{top:0;right:10px}.sticker-yellow{right:0;bottom:82px}.spark-two{left:2px;bottom:83px}.orbit{width:365px;max-width:98%}.ribbon{padding:14px 0}.ribbon>div{justify-content:flex-start;padding-left:22px;font-size:12px;gap:23px;min-width:max-content}.services{grid-template-columns:1fr;gap:24px;padding:36px 0}.services-heading{margin-bottom:4px}h2{font-size:30px}.service{padding-left:18px}.service p{font-size:13px;max-width:430px}h3{font-size:16px;margin:7px 0}.number{font-size:10px}footer{flex-wrap:wrap;gap:8px 17px;padding:20px 0}.footer-note{width:100%;margin:3px 0 0}footer p{margin:0}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* Contain tilted decorative elements without horizontal scrolling. */
.page{overflow:hidden}
/* Keep the textile weave behind the artwork and text. */
body:before{z-index:0}.page{position:relative;z-index:1}

/* Header contact on desktop; fixed bottom action on mobile. */
.header{gap:24px}
.header .status{margin-left:auto}
body{padding-bottom:0}
.whatsapp-contact{position:relative;flex-shrink:0;z-index:10;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:14px 22px;border:2px solid var(--ink);border-radius:16px;background:#25d366;color:#14241b;text-decoration:none;font-size:15px;font-weight:800;box-shadow:4px 4px 0 var(--ink);transition:transform .2s,box-shadow .2s}
.whatsapp-contact svg{width:26px;height:26px;flex-shrink:0}
.whatsapp-contact:hover{transform:translateY(-3px);box-shadow:4px 7px 0 var(--ink)}
.whatsapp-contact:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
@media(max-width:720px){.header{gap:12px}body{padding-bottom:calc(100px + env(safe-area-inset-bottom,0px))}.whatsapp-contact{position:fixed;right:20px;left:20px;bottom:calc(18px + env(safe-area-inset-bottom,0px));font-size:15px}}
@media(min-width:721px) and (max-width:1000px){.header{gap:16px}.header .status{font-size:8px;letter-spacing:.8px}.whatsapp-contact{padding:12px 16px;font-size:13px}}

/* Continuous, staggered motion for the artwork. */
.art .logo-card{transition:background 1s ease;animation:card-sway 6s ease-in-out infinite;transform-origin:50% 65%}
.art .spark-one{animation:star-turn 18s linear infinite}
.art .spark-two{animation:star-pulse 3.6s ease-in-out infinite}
.art .sticker-pink{animation:pink-float 4.8s ease-in-out infinite}
.art .sticker-yellow{animation:yellow-float 5.4s ease-in-out infinite}
.art .orbit{animation:orbit-turn 65s linear infinite}
.art .swatch.active{animation:swatch-bounce 1.4s ease-in-out infinite}
.motion-toggle{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:5px;border:1px solid #20231f50;border-radius:50%;background:var(--paper);color:var(--ink);cursor:pointer;flex-shrink:0}
.motion-toggle svg{width:14px;height:14px}
.motion-toggle .play-icon,.motion-toggle[aria-pressed="true"] .pause-icon,.motion-toggle[hidden]{display:none}
.motion-toggle[aria-pressed="true"] .play-icon{display:block}
.motion-toggle:hover{background:var(--yellow)}
.art.motion-paused *{animation-play-state:paused!important}
@keyframes card-sway{0%,100%{transform:translateY(0) rotate(7deg)}50%{transform:translateY(-9px) rotate(2deg)}}
@keyframes star-turn{from{transform:rotate(12deg)}to{transform:rotate(372deg)}}
@keyframes star-pulse{0%,100%{transform:scale(.9) rotate(-9deg)}50%{transform:scale(1.16) rotate(12deg)}}
@keyframes pink-float{0%,100%{transform:translateY(0) rotate(-13deg)}50%{transform:translateY(-7px) rotate(-8deg)}}
@keyframes yellow-float{0%,100%{transform:translateY(0) rotate(13deg)}50%{transform:translateY(6px) rotate(19deg)}}
@keyframes orbit-turn{from{transform:rotate(-18deg)}to{transform:rotate(342deg)}}
@keyframes swatch-bounce{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-5px) scale(1.12)}}
@media(prefers-reduced-motion:reduce){.art *{animation:none!important;transition:none!important}}

/* Two equal copies meet at the loop boundary without a gap. */
.ribbon>.ribbon-track{width:max-content;min-width:0;gap:0;padding-left:0;justify-content:flex-start;animation:ribbon-march 30s linear infinite}
.ribbon-group{display:flex;align-items:center;justify-content:space-around;gap:30px;flex-shrink:0;min-width:max(1130px,100vw);padding:0 15px}
@keyframes ribbon-march{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:720px){.ribbon-group{min-width:max-content;gap:23px;padding:0 11.5px}.ribbon>.ribbon-track{animation-duration:25s}}
@media(prefers-reduced-motion:reduce){.ribbon>.ribbon-track{animation:none}}

/* Four hand-drawn frames, swapped every 120 ms like a flipbook. */
.flipbook-arrow .arrow-frame{opacity:0;animation:arrow-flipbook .48s steps(1,end) infinite}
.flipbook-arrow .arrow-frame:nth-child(2){animation-delay:-.36s}
.flipbook-arrow .arrow-frame:nth-child(3){animation-delay:-.24s}
.flipbook-arrow .arrow-frame:nth-child(4){animation-delay:-.12s}
@keyframes arrow-flipbook{0%{opacity:1}25%,100%{opacity:0}}
body:has(.art.motion-paused) .arrow-frame{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.flipbook-arrow .arrow-frame{animation:none;opacity:0}.flipbook-arrow .arrow-frame:first-child{opacity:1}}