.wrap{padding-left:1.5rem;padding-right:1.5rem}
html{scroll-behavior:smooth;scroll-padding-top:25px}.top{display:flex;justify-content:space-between;align-items:center;gap:20px}.top nav{display:flex;gap:22px;font-size:.75rem}.top nav a{color:var(--text);text-decoration:none}.top nav a:hover{text-decoration:underline}.sec-h{padding-bottom:4rem}.filters{display:flex;gap:22px;overflow:auto;margin-bottom:25px;border-bottom:1px solid #9e9d7755;white-space:nowrap}.filters button{background:none;border:0;border-bottom:2px solid transparent;color:var(--text);font:inherit;font-size:.75rem;padding:12px 0;cursor:pointer;opacity:.7}.filters button.active{opacity:1;border-bottom-color:var(--sec)}.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px 18px}.project-card{min-width:0}.project-card a{display:block;color:var(--text);text-decoration:none}.project-image{aspect-ratio:1.06;overflow:hidden;background:#9e9d7733}.project-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}.project-card a:hover img{transform:scale(1.04)}.project-caption{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding-top:12px}.project-caption h3{font-family:Montserrat,Arial,sans-serif;font-size:.72rem;line-height:1.5;letter-spacing:0;margin:0}.project-category{font-size:.65rem!important;opacity:.65;margin:4px 0 0!important;line-height:1.5}.plan-index{font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;margin:0 0 15px;opacity:.75}.plan h3{font-size:1.65rem}.plan-description{font-size:.78rem;line-height:1.8;opacity:.85;min-height:70px;margin-top:15px}.price{display:flex;flex-direction:column;border-bottom:1px solid #f7f1e644;padding-bottom:18px;margin-bottom:8px}.price strong{font-family:Americana,Georgia,serif;font-size:1.7rem;font-weight:400}.price span{font-size:.65rem;margin-top:7px}.plan ul{font-size:.78rem;margin-bottom:20px}.plan li{padding:.35rem 0}.plan-cta{display:flex;justify-content:space-between;gap:15px;color:var(--text);text-decoration:none;border:1px solid var(--text);border-radius:999px;padding:12px 18px;font-size:.7rem;margin-top:auto}.plan-cta:hover{background:var(--text);color:var(--accent)}.applications{font-size:.7rem;line-height:1.9;margin:0 0 24px;opacity:.85}.contact-number{font-size:.8rem;margin-top:20px!important;margin-bottom:10px!important}.instagram{font-size:.8rem;color:var(--text);text-underline-offset:5px}.floating-wa{position:fixed;bottom:20px;right:20px;background:var(--text);color:var(--main);display:flex;align-items:center;gap:9px;padding:12px 18px;border-radius:999px;text-decoration:none;font-size:.72rem;z-index:5;box-shadow:0 4px 20px #0003}.loading,.empty,.error{grid-column:1/-1;padding:35px 0;font-size:.8rem}.error{color:#f8bacb}.skeleton{aspect-ratio:1.06;background:#9e9d7722;animation:pulse 1s alternate infinite}@keyframes pulse{to{opacity:.4}}dialog{background:var(--main);color:var(--text);border:1px solid var(--sec);padding:30px;width:min(900px,92vw);max-height:90vh}dialog::backdrop{background:#171713dd}.close-dialog{display:block;margin-left:auto;background:none;color:var(--text);border:0;border-bottom:1px solid var(--sec);font:inherit;font-size:.75rem;cursor:pointer;margin-bottom:20px}dialog h2{font-size:2rem;margin-bottom:12px;overflow-wrap:anywhere}.dialog-description{font-size:.8rem}dialog figure{margin:25px 0 0}dialog figure img,dialog figure video{display:block;width:100%;max-height:65vh;object-fit:contain}dialog figcaption{font-size:.7rem;margin-top:10px}dialog dl{font-size:.8rem}dialog dd{margin-left:0}a:focus-visible,button:focus-visible{outline:2px solid var(--sec);outline-offset:5px}footer{padding-bottom:6rem}
@media(max-width:640px){.top nav{gap:14px;font-size:.65rem}.top svg{height:1.8rem}.hero{min-height:auto;padding-bottom:3rem}.hero svg{height:30vh;min-height:190px}.hero p{font-size:.9rem}.project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px}.project-caption h3{font-size:.65rem}.project-category{font-size:.6rem!important}.filters{gap:20px}.filters button{font-size:.65rem}.plans{grid-template-columns:1fr;row-gap:3rem}.plan h3{font-size:1.8rem}.plan-description{min-height:0;font-size:.85rem}.plan ul{font-size:.85rem}.price strong{font-size:1.9rem}.applications{font-size:.8rem}.plan-cta{font-size:.8rem}.contact{padding:3.5rem 0}.floating-wa{right:12px;bottom:15px;padding:10px 14px;font-size:.65rem}dialog{padding:22px}.sec-h{padding-top:2.5rem}.band{padding:3rem 0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
/* Portfolio on the brand's cream surface. */
#portafolio{background:var(--text);color:var(--main);max-width:none;padding:4rem max(1.5rem,calc((100% - 57rem)/2));}
#portafolio .filters{border-bottom-color:#44443b33}
#portafolio .filters button{color:var(--main)}
#portafolio .filters button.active{border-bottom-color:var(--accent)}
#portafolio .project-card a{color:var(--main)}
#portafolio .project-image{background:#44443b11}
#portafolio .error{color:#91233f}
#portafolio .skeleton{background:#44443b15}
@media(max-width:640px){#portafolio{padding-top:2.5rem;padding-bottom:3rem}}

/* Project galleries show complete artwork on the cream surface. */
dialog{background:var(--text);color:var(--main);border:1px solid #44443b33}
.close-dialog{color:var(--main);border-bottom-color:#44443b55}
dialog .error{color:#91233f}
dialog figure img{height:auto;max-height:75vh;object-fit:contain}
#portafolio>p{margin-bottom:2rem}

/* A horizontal filmstrip per complete project. */
#project-grid{display:flex;flex-direction:column;gap:3.5rem}
.project-row{min-width:0;width:100%;padding-bottom:2rem;border-bottom:1px solid #44443b22}
.project-row-header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}
.project-row-header h3{font-size:1.55rem;line-height:1.3;margin:0 0 8px}
.project-row-header p{font-size:.7rem;margin:0;opacity:.7}
.row-controls{display:flex;gap:12px}
.row-controls button{background:none;color:var(--main);border:1px solid #44443b55;width:38px;height:38px;font-size:19px;cursor:pointer;border-radius:50%;transition:background .2s}
.row-controls button:hover:not(:disabled){background:#44443b12}
.row-controls button:disabled{opacity:.25;cursor:default}
.project-track{display:flex;gap:16px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-color:var(--sec) transparent;scrollbar-width:thin;padding-bottom:16px;-webkit-overflow-scrolling:touch}
.project-slide{flex:0 0 31.5%;min-width:0;margin:0;scroll-snap-align:start}
.slide-open{display:block;padding:0;border:0;width:100%;background:none;cursor:default}
.project-slide img{display:block;width:100%;height:auto;aspect-ratio:2161/2881;object-fit:contain;background:#e4ddd0}
.project-slide figcaption{font-size:.62rem;line-height:1.5;margin-top:12px;color:var(--main);opacity:.75}
.row-hint{margin:13px 0 0;font-size:.65rem;opacity:.65;letter-spacing:.02em}
.row-loading{flex:0 0 240px;align-self:center;font-size:.75rem}
@media(max-width:640px){.project-slide{flex-basis:76%}.project-row-header h3{font-size:1.35rem}.row-controls{gap:8px}.row-controls button{width:33px;height:33px}.project-track{gap:12px}.project-row{padding-bottom:1.5rem}#project-grid{gap:2.5rem}}
/* Uniform dimensions for every image in every project row. */
.project-slide .slide-open{aspect-ratio:3/4;overflow:hidden}
.project-slide .slide-open img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:center}

.portfolio-instagram{text-align:center;padding:3rem 0 .5rem}.portfolio-instagram p{font-size:.85rem;line-height:1.9;margin:0 0 1.5rem}.portfolio-instagram .cta{background:var(--accent);color:var(--text);font-size:.78rem}.portfolio-instagram .cta:hover{background:var(--main)}.portfolio-instagram .cta span{margin-left:1.2rem}@media(max-width:640px){.portfolio-instagram{padding-top:2rem}.portfolio-instagram p{font-size:.78rem}.portfolio-instagram .cta{font-size:.7rem;padding:.9rem 1.2rem}}
#portafolio .portfolio-instagram p{max-width:none;width:100%;margin:0 auto 1.5rem;text-align:center}
#portafolio .portfolio-instagram{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:1.5rem}
#portafolio .portfolio-instagram p{display:block;max-width:100%;width:auto;margin:0;text-align:center}
#portafolio .portfolio-instagram .cta{display:inline-block;align-self:center;margin:0}

/* Move the studio signature into the empty contact column. */
.contact>.wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,.65fr);gap:4rem;align-items:stretch}
.contact-copy{min-width:0}
.contact-brand{display:flex;align-items:center;justify-content:center;padding:0 1rem}
.contact-brand .contact-logo{display:block;height:100%;max-height:340px;width:auto;max-width:100%;color:var(--sec)}
footer .wrap{justify-content:flex-end}
@media(max-width:640px){.contact>.wrap{grid-template-columns:minmax(0,1fr) 100px;gap:1rem}.contact-brand{padding:0}.contact-brand .contact-logo{max-height:230px;width:100%;height:auto}.contact-copy .cta{font-size:.75rem;padding:.9rem 1.1rem}}
@media(max-width:360px){.contact>.wrap{grid-template-columns:minmax(0,1fr) 75px;gap:.75rem}}

/* Contact: logo on the left, centered copy and action on the right. */
.contact>.wrap{grid-template-columns:minmax(180px,.65fr) minmax(0,1fr);align-items:center}
.contact-brand{grid-column:1;grid-row:1}
.contact-copy{grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:center;text-align:center}
.contact-copy h2{width:100%;text-align:center}
.contact-copy p{margin:0 auto 1.6rem;text-align:center}
.contact-copy .cta{align-self:center}
@media(max-width:640px){.contact>.wrap{grid-template-columns:100px minmax(0,1fr);gap:1.2rem}.contact-copy h2{font-size:1.6rem}.contact-copy p{font-size:.8rem}.contact-copy .cta{font-size:.7rem;padding:.9rem 1rem}}
@media(max-width:360px){.contact>.wrap{grid-template-columns:75px minmax(0,1fr);gap:.8rem}}
/* Contact order: copy left, studio logo right. */
.contact>.wrap{grid-template-columns:minmax(0,1fr) minmax(180px,.65fr)}
.contact-copy{grid-column:1;grid-row:1}
.contact-brand{grid-column:2;grid-row:1}
@media(max-width:640px){.contact>.wrap{grid-template-columns:minmax(0,1fr) 100px;gap:1.2rem}}
@media(max-width:360px){.contact>.wrap{grid-template-columns:minmax(0,1fr) 75px;gap:.8rem}}

/* Static editorial services on burgundy. */
.services{background:var(--accent);color:var(--text);padding:5.5rem 0}
.services-layout{display:grid;grid-template-columns:1fr 1.7fr;gap:4rem;align-items:start}
.services-heading{position:sticky;top:3rem;padding-top:1rem}
.services-kicker{font-size:.6rem;letter-spacing:.15em;margin:0 0 1.5rem;color:var(--text);opacity:.75}
.services-heading h2{font-size:clamp(2rem,3.8vw,2.8rem);line-height:1.15;margin:0;max-width:11ch}
.service-row{border-bottom:1px solid #f7f1e644;padding:1.6rem 0}
.service-row:first-child{border-top:1px solid #f7f1e644}
.service-label{display:grid;grid-template-columns:1fr;align-items:center;gap:14px;margin:0 0 .75rem;font-weight:400}

.service-name{font-family:Americana,Georgia,serif;font-size:clamp(1.1rem,2.2vw,1.45rem);line-height:1.4}
.service-detail{padding-left:0}
.service-detail p{font-size:.75rem;line-height:1.9;margin:0;max-width:42ch;opacity:.85}
@media(max-width:640px){.services{padding:3.5rem 0}.services-layout{grid-template-columns:1fr;gap:2.5rem}.services-heading{position:static;padding:0}.services-heading h2{font-size:2.2rem;max-width:15ch}.services-kicker{margin-bottom:1rem}.service-row{padding:1.4rem 0}.service-label{gap:12px}.service-name{font-size:1.25rem}.service-detail{padding-left:0}.service-detail p{font-size:.73rem}}

/* Equal space around the contact description. */
.contact-copy h2{margin-bottom:0}
.contact-copy p{margin:1.6rem auto}

/* Instagram button and Saasil palette framing. */
.portfolio-instagram .cta{background:var(--main);color:var(--text)}
.portfolio-instagram .cta:hover{background:var(--accent)}
.project-slide img[src*="c425ee_a946da173c514c54b083279a07710a92"]{transform:scale(1.025)}

/* Show three complete portfolio images in desktop carousels. */
@media(min-width:641px){.project-slide{flex-basis:calc((100% - 32px) / 3)}}

.floating-wa svg{display:block;flex:none;transform:none;vertical-align:middle}