:root{--navy:#07182d;--pink:#ff3e9d;--blue:#eef6ff;--yellow:#ffbd2e;--green:#42b94d;--purple:#7046ff;--line:#d9e1eb}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--navy);background:#fff;font-family:"DM Sans",sans-serif;line-height:1.5}img{display:block;width:100%}a{color:inherit;text-decoration:none}h1,h2,.package h3{font-family:"Playfair Display",serif;line-height:.96;letter-spacing:-.04em}.script{font-family:"Caveat",cursive;color:var(--pink);font-weight:700;line-height:1.05}.eyebrow{text-transform:uppercase;font-size:.72rem;letter-spacing:.1em;font-weight:700}.button{display:inline-flex;align-items:center;justify-content:center;padding:15px 28px;border:0;border-radius:999px;text-transform:uppercase;font-size:.78rem;letter-spacing:.03em;font-weight:700;cursor:pointer}.pink{background:var(--pink);color:#fff}.navy{background:var(--navy);color:#fff}.white{background:#fff;color:var(--navy)}.small{padding:12px 22px}
.nav{height:92px;padding:12px 4vw;display:flex;align-items:center;gap:38px;background:#fff;position:sticky;top:0;z-index:10;box-shadow:0 2px 18px #14243a12}.brand{width:90px;height:68px}.brand img,footer img{height:100%;object-fit:contain;background:#000}.nav nav{display:flex;gap:26px;margin-left:auto;text-transform:uppercase;font-size:.82rem;letter-spacing:.01em;font-weight:700}
@media(min-width:1200px){.nav nav{gap:32px;font-size:.9rem}}
.hero{min-height:650px;display:grid;grid-template-columns:38% 62%;position:relative;overflow:hidden}.hero-copy{padding:55px 5vw 55px 6vw;position:relative}.hero h1{font-size:clamp(3.5rem,5.8vw,6.7rem);margin:0 0 20px}.hero h1 span,.package-title h2 span{color:var(--yellow)}.hero .script{font-size:clamp(1.9rem,3vw,3rem);max-width:530px;margin:15px 0 30px;transform:rotate(-2deg)}.hero-copy>p:not(.script){max-width:470px;margin-bottom:28px}.hero-actions{display:flex;flex-direction:column;align-items:flex-start;gap:13px}.outline{background:#fff;color:var(--navy);border:1.5px solid var(--navy)}.paint{position:absolute;font-family:"Caveat";font-size:7rem;right:-10px;top:10px;color:var(--pink);transform:rotate(-20deg)}.hero-image{margin:0;position:relative;clip-path:polygon(5% 0,100% 0,100% 100%,0 100%)}.hero-image img{height:100%;object-fit:cover}.hero-image figcaption{position:absolute;right:24px;bottom:18px;font-size:.68rem;font-weight:700}
.values{display:grid;grid-template-columns:repeat(4,1fr);padding:28px 4vw;border-bottom:1px solid var(--line)}.values article{text-align:center;padding:10px 28px;border-right:1px solid var(--line)}.values article:last-child{border:0}.values .icon{font-style:normal;font-size:3rem;line-height:1}.values h3{text-transform:uppercase;font-size:.72rem}.values p{font-size:.8rem}.pink-text{color:var(--pink)}.yellow-text{color:var(--yellow)}.green-text{color:var(--green)}.purple-text{color:var(--purple)}
.section{padding:75px 4vw}.projects{background:linear-gradient(110deg,#fff 0,#fff4fb 55%,#eef6ff 100%);display:grid;grid-template-columns:27% 73%;gap:35px}.intro h2,.process h2,.offer h2,.package-title h2,.faq h2,.start h2,.story h2{font-size:clamp(2.7rem,4vw,5rem);margin:8px 0 12px}.underline{display:block;background:var(--pink);height:4px;width:180px;transform:rotate(-2deg);margin:18px 0 28px}.intro>p:last-child{max-width:300px}.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.project-grid article{background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 8px 25px #0a1c3212}.project-grid img{height:285px;object-fit:cover}.project-grid h3{font-size:.85rem;text-transform:uppercase;margin:16px 16px 0}.project-grid p{font-size:.77rem;margin:4px 16px 17px}
.process-title,.offer-heading,.package-title{display:flex;justify-content:space-between;align-items:flex-start;gap:30px}.side-note,.offer-heading>.script{font-size:2.7rem;transform:rotate(-4deg);margin:0 8vw 0 0}.step-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:38px;margin-top:36px}.step-grid article{display:grid;grid-template-columns:50px 1fr;gap:10px}.circle{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:1.2rem}.yellow{background:var(--yellow)}.green{background:var(--green)}.step-grid h3{text-transform:uppercase;font-size:.78rem;margin:4px 0}.step-grid p{font-size:.8rem;margin:5px 0 18px}.step-grid img{grid-column:1/-1;height:190px;object-fit:cover;border-radius:15px}.process-cta{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:30px;margin:35px auto 0;max-width:900px;text-align:center}.process-cta p{font-size:.8rem}.process-cta .script{font-size:1.8rem;transform:rotate(-3deg)}
.offer{background:var(--navy);color:#fff}.offer-heading{display:block}.offer-heading .offer-title{color:#fff;font-family:"DM Sans",sans-serif;font-size:clamp(3.8rem,7vw,7rem);line-height:.9;letter-spacing:-.055em;margin:0}.offer-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:#ffffff55;margin-top:48px}.offer-grid article{background:var(--navy);padding:28px}.offer-grid i{font-style:normal;color:var(--pink);font-weight:700}.offer-grid h3{font-family:"Playfair Display";font-size:1.4rem}.offer-grid p{font-size:.88rem;color:#dce5ef}
.story{display:grid;grid-template-columns:45% 55%;background:#fff6fa}.story>div{padding:75px 6vw}.story h2{font-size:clamp(2.7rem,4.5vw,5rem)}.story .script{font-size:2rem}.story img{height:100%;min-height:580px;object-fit:cover}
.package-title>p{max-width:430px;margin-top:42px}.package-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1400px;margin:30px auto}.package{border-radius:12px;padding:28px 30px;display:flex;flex-direction:column}.small-format{background:linear-gradient(135deg,#f0fdf4,#dcfce7)}.concept{background:linear-gradient(135deg,#fff0f6,#f7e8f1)}.design{background:linear-gradient(135deg,#eef6ff,#dfebfb)}.package header{display:flex;justify-content:space-between;gap:15px;align-items:flex-start}.package h3{font-size:2.2rem;margin:0}.package strong{font-size:1.4rem;text-align:right}.package strong small{display:block;font-size:.75rem}.package h4{text-transform:uppercase;font-size:.75rem;letter-spacing:.04em}.package ul{padding-left:20px;flex:1}.package li{font-size:1rem;margin:10px 0;font-weight:700}.package li p{font-size:.93rem;font-weight:400;color:#526174;margin:2px 0 0}.package-fineprint{font-size:.78rem;color:#526174;margin:16px 0 18px;line-height:1.5}.fineprint{text-align:center;font-size:.78rem}
.spaces{background:#eef6ff;padding:34px 4vw 38px}.spaces-top{border-bottom:1px solid var(--line)}.spaces>p{text-transform:uppercase;font-size:.72rem;font-weight:700;margin:0 0 18px}.spaces>div{display:grid;grid-template-columns:repeat(6,1fr)}.spaces span{text-align:center;border-right:1px solid #b9cde4;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:10px;min-height:112px;padding:4px 18px}.spaces span:last-child{border:0}.spaces svg{width:52px;height:52px;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;transition:transform .22s ease}.spaces span:hover svg{transform:translateY(-4px) scale(1.05)}.spaces b{display:block;color:var(--navy);font-size:.72rem;line-height:1.25;text-transform:uppercase}.space-pink{color:var(--pink)}.space-yellow{color:var(--yellow)}.space-green{color:var(--green)}.space-purple{color:var(--purple)}.space-heart{color:#ff4f8f}.space-orange{color:#ff7a24}.values-lower{background:#fff}
.faq{display:grid;grid-template-columns:40% 60%;gap:5vw}.accordion{border-top:1px solid var(--navy)}details{border-bottom:1px solid var(--navy)}summary{padding:20px 0;font-family:"Playfair Display";font-size:1.25rem;font-weight:700;cursor:pointer}details p{padding:0 0 20px;max-width:680px}.cta-band{min-height:230px;padding:45px 5vw;display:flex;align-items:center;justify-content:space-between;gap:30px;color:#fff;background:linear-gradient(90deg,#08192db8,#08192d78),url('assets/cloud9.webp') center/cover}.cta-band h2{font-family:"Playfair Display";font-size:2.7rem;margin:0}
.start{background:linear-gradient(135deg,#fff3f8,#eef6ff);display:grid;grid-template-columns:38% 62%;gap:6vw}.start .script{font-size:2rem}.start form{background:#fff;padding:28px;border-radius:14px;box-shadow:0 10px 30px #07182d15;display:grid;grid-template-columns:1fr 1fr;gap:16px}label{font-size:.78rem;font-weight:700}input,select,textarea{width:100%;padding:12px;margin-top:6px;border:1px solid #bdc9d7;border-radius:8px;font:inherit}.full{grid-column:1/-1}.form-note{text-align:center;margin:0;font-size:.76rem}
.site-footer{position:relative;background:#fff5f5;padding:42px 3vw 32px;color:#282326}.footer-contact{display:flex;flex-direction:column;align-items:flex-start;gap:32px;padding-bottom:38px}.footer-email{font-family:"Playfair Display",serif;font-size:1.25rem;text-decoration:underline;text-underline-offset:4px}.social-link{width:30px;height:30px}.social-link svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8}.footer-bottom{border-top:1px solid #d8cece;padding-top:27px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px}.footer-bottom>p{margin:0;font-size:.84rem}.legal-links{display:flex;justify-content:center;flex-wrap:wrap;gap:18px}.legal-links button{border:0;background:none;color:inherit;text-decoration:underline;text-underline-offset:3px;font:inherit;font-size:.8rem;padding:0;cursor:pointer}.payment-list{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}.payment-list span{background:#fff;border:1px solid #d8cece;border-radius:5px;padding:6px 9px;font-size:.65rem;font-weight:800}.whatsapp-float{position:fixed;right:22px;bottom:22px;z-index:60;width:58px;height:58px;background:#25d366;border:0;border-radius:50%;box-shadow:0 10px 28px #00000038;display:flex;align-items:center;justify-content:center}.whatsapp-float svg{width:29px;height:29px;fill:none;stroke:#fff;stroke-width:1.8}.legal-dialog{width:min(680px,calc(100% - 32px));border:0;border-radius:18px;padding:38px;color:var(--navy);box-shadow:0 24px 80px #07182d40}.legal-dialog::backdrop{background:#07182d99;backdrop-filter:blur(3px)}.legal-dialog h2{font-size:2.2rem;margin:0 40px 24px 0}.legal-dialog p{line-height:1.7}.legal-dialog a{text-decoration:underline}.dialog-close{position:absolute;right:18px;top:14px;border:0;background:#eef6ff;border-radius:50%;width:36px;height:36px;font-size:1.5rem;cursor:pointer}
@media(max-width:900px){.nav nav{display:none}.nav .button{margin-left:auto}.hero{grid-template-columns:1fr}.hero-image{min-height:500px;clip-path:none}.values{grid-template-columns:1fr 1fr}.values article:nth-child(2){border-right:0}.projects,.faq,.start,.story{grid-template-columns:1fr}.project-grid{grid-template-columns:repeat(3,1fr)}.step-grid,.offer-grid{grid-template-columns:1fr 1fr}.spaces>div{grid-template-columns:repeat(3,1fr);gap:25px}.story img{min-height:440px}.process-cta{grid-template-columns:1fr}.faq-heading{max-width:650px}}
@media(max-width:620px){.nav{height:76px}.brand{width:70px;height:52px}.nav .button{font-size:.66rem;padding:10px 14px}.hero-copy{padding:45px 24px}.hero h1{font-size:3.6rem}.hero-image{min-height:390px}.values{grid-template-columns:1fr 1fr;padding:20px 10px}.values article{padding:10px}.section{padding:60px 22px}.projects{display:block}.project-grid{grid-template-columns:1fr;margin-top:30px}.project-grid img{height:260px}.process-title,.offer-heading,.package-title{display:block}.side-note,.offer-heading>.script{margin:20px 0}.step-grid,.offer-grid,.package-grid{grid-template-columns:1fr}.package header{display:block}.package strong{text-align:left;display:block;margin-top:12px}.spaces>div{grid-template-columns:1fr 1fr}.cta-band{align-items:flex-start;flex-direction:column}.start form{grid-template-columns:1fr}.start form label{grid-column:1/-1}.story img{min-height:350px}.hero .script{font-size:2.2rem}.site-footer{padding:34px 22px 28px}.footer-contact{padding-bottom:28px}.whatsapp-float{right:16px;bottom:16px;width:50px;height:50px}.whatsapp-float svg{width:25px;height:25px}.footer-bottom{grid-template-columns:1fr}.legal-links{justify-content:flex-start;gap:13px 18px}.payment-list{justify-content:flex-start}.legal-dialog{padding:30px 22px}.legal-dialog h2{font-size:1.8rem}}

/* Logo proportions and project galleries */
.nav .brand{width:70px;height:70px;flex:0 0 70px}
.nav .brand img{width:100%;height:100%;object-fit:contain}
.project-media{position:relative;overflow:hidden}
.project-media img{width:100%;height:285px;object-fit:cover}
.gallery-next{position:absolute;bottom:12px;right:12px;display:none;align-items:center;justify-content:center;width:38px;height:38px;border:0;border-radius:50%;background:#fff;color:var(--navy);font-size:1.3rem;box-shadow:0 3px 12px #07182d55;cursor:pointer}
.gallery-next:focus-visible{display:flex;outline:3px solid var(--pink)}
.gallery-count{position:absolute;bottom:15px;left:14px;display:none;padding:4px 8px;border-radius:20px;background:#fff;color:var(--navy);font-size:.7rem;font-weight:700}
@media(hover:none),(pointer:coarse){.gallery-next{display:flex}.gallery-count{display:block}}
@media(max-width:620px){.nav .brand{width:54px;height:54px;flex-basis:54px}.project-media img{height:260px}}

/* Compact sample of the final deliverables */
.offer .offer-heading{display:flex;align-items:center;justify-content:space-between;gap:36px}
.offer-title{max-width:calc(100% - 360px)}
.deliverables-preview{width:min(32vw,320px);flex:0 0 auto;margin:0}
.deliverables-preview video{width:100%;height:auto;max-height:190px;display:block;object-fit:contain;border-radius:10px;background:#17263a}
.deliverables-preview figcaption{margin-top:8px;color:#dce5ef;font-size:.76rem;text-align:center}
@media(max-width:900px){.offer .offer-heading{align-items:flex-start}.offer-title{max-width:60%}.deliverables-preview{width:min(34vw,280px)}}
@media(max-width:620px){.offer .offer-heading{display:block}.offer-title{max-width:100%;font-size:clamp(2.7rem,10vw,4.2rem)}.deliverables-preview{width:min(100%,360px);margin:26px auto 0}.deliverables-preview video{max-height:220px}}

/* Clear, optional contact consent */
.consent-block{border-top:1px solid var(--line);padding-top:18px}
.consent-choice{display:flex;align-items:flex-start;gap:12px;font-size:.9rem;line-height:1.45;font-weight:500;cursor:pointer}
.consent-choice input{width:20px;height:20px;flex:0 0 20px;margin:2px 0 0;accent-color:var(--pink)}
.consent-block p{margin:10px 0 0 32px;font-size:.78rem;color:#526174}
.consent-block button{border:0;background:none;padding:0;color:var(--navy);text-decoration:underline;cursor:pointer;font:inherit}

/* WhatsApp CTA button in process section */
.whatsapp-btn{background:#25d366;color:#fff}
.whatsapp-btn:hover{background:#1ebe5a}
.whatsapp-cta{position:relative;display:inline-block;text-align:center}
.whatsapp-cta>p{position:absolute;top:-1.6em;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:.8rem;margin:0}

/* ---------- Motion ---------- */
:root{--ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1)}

.button{transition:transform 220ms var(--ease-out)}
.button:active{transform:scale(.97)}
.gallery-next{transition:transform 200ms var(--ease-out)}
.gallery-next:active{transform:scale(.92)}
.project-media img{transition:opacity 320ms ease}

@media (hover:hover) and (pointer:fine){
  .project-grid article{transition:transform 380ms var(--ease-out),box-shadow 380ms var(--ease-out)}
  .project-grid article:hover{transform:translateY(-6px);box-shadow:0 18px 36px #0a1c3224}
  .package{transition:transform 380ms var(--ease-out),box-shadow 380ms var(--ease-out)}
  .package:hover{transform:translateY(-5px);box-shadow:0 18px 36px #07182d1f}
  .whatsapp-float{transition:transform 320ms var(--ease-out),box-shadow 320ms var(--ease-out)}
  .whatsapp-float:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 12px 30px #241c1c28}
  .nav nav a{position:relative}
  .nav nav a::after{content:'';position:absolute;left:0;right:100%;bottom:-4px;height:2px;background:var(--pink);transition:right 340ms var(--ease-out)}
  .nav nav a:hover::after{right:0}
}

summary{list-style:none;position:relative;padding-right:34px}
summary::-webkit-details-marker{display:none}
summary::after{content:'+';position:absolute;right:0;top:16px;font-size:1.5rem;line-height:1;transition:transform 320ms var(--ease-out)}
details[open] summary::after{transform:rotate(45deg)}

@media (prefers-reduced-motion: no-preference){
  .whatsapp-float{position:fixed}
  .whatsapp-float::before{content:'';position:absolute;inset:0;border-radius:50%;background:#25d366;pointer-events:none;animation:waPulse 3s ease-out infinite}
  @keyframes waPulse{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.7);opacity:0}}

  /* Hero entrance */
  .hero-copy h1,.hero-copy>p,.hero-copy .hero-actions{opacity:0;transform:translateY(16px);animation:heroFadeUp 900ms var(--ease-out) forwards}
  .hero-copy h1{animation-delay:160ms}
  .hero-copy>p.script{animation-delay:300ms}
  .hero-copy>p:not(.script){animation-delay:420ms}
  .hero-copy .hero-actions{animation-delay:540ms}
  .hero-copy .paint{opacity:0;transform:translateY(16px) rotate(-20deg);animation:paintFadeUp 900ms var(--ease-out) 80ms forwards,paintFloat 4.2s ease-in-out 1100ms infinite}
  .hero-image{opacity:0;transform:scale(1.04);animation:heroImageIn 1150ms var(--ease-out) 280ms forwards}
  @keyframes heroFadeUp{to{opacity:1;transform:translateY(0)}}
  @keyframes paintFadeUp{to{opacity:1;transform:translateY(0) rotate(-20deg)}}
  @keyframes paintFloat{0%,20%,100%{transform:translateY(0) rotate(-20deg)}60%{transform:translateY(-7px) rotate(-20deg)}}
  @keyframes heroImageIn{to{opacity:1;transform:scale(1)}}

  /* Scroll reveal */
  [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity 800ms var(--ease-out),transform 800ms var(--ease-out)}
  [data-reveal].is-visible{opacity:1;transform:translateY(0)}
  [data-reveal-group]>*{opacity:0;transform:translateY(22px);transition:opacity 750ms var(--ease-out),transform 750ms var(--ease-out)}
  [data-reveal-group].is-visible>*{opacity:1;transform:translateY(0)}
  [data-reveal-group].is-visible>*:nth-child(1){transition-delay:0ms}
  [data-reveal-group].is-visible>*:nth-child(2){transition-delay:80ms}
  [data-reveal-group].is-visible>*:nth-child(3){transition-delay:160ms}
  [data-reveal-group].is-visible>*:nth-child(4){transition-delay:240ms}
  [data-reveal-group].is-visible>*:nth-child(5){transition-delay:320ms}
  [data-reveal-group].is-visible>*:nth-child(6){transition-delay:400ms}
  [data-reveal-group].is-visible>*:nth-child(7){transition-delay:480ms}
  [data-reveal-group].is-visible>*:nth-child(8){transition-delay:560ms}
  [data-reveal-group].is-visible>*:nth-child(9){transition-delay:640ms}

  .underline{transform-origin:left center;clip-path:inset(0 100% 0 0);transition:clip-path 900ms var(--ease-in-out) 260ms}
  [data-reveal].is-visible .underline,[data-reveal-group].is-visible .underline{clip-path:inset(0 0 0 0)}
}