/* Button colours sampled from the supplied 77 MARKETING LOGO.ai artwork. */
:root{--brand-navy:#0c2231;--brand-ink:#070a0b;--brand-cyan:#248bc3;--brand-magenta:#ec1c6f;--brand-coral:#ee2e55;--brand-yellow:#fbdf1b;--brand-gold:#fccb1f;--brand-ochre:#e5af23}
.m-btn,.m-btn-2,.btn,.sticky-quote,.motion-control,.tool-tabs button,.view-tabs button,.category-buttons button,.layer-item button,.dialog-close{--button-fill:var(--brand-navy);--button-ink:#fff}
.m-btn,.m-btn-2,.btn,.sticky-quote{background:var(--button-fill)!important;color:var(--button-ink)!important;border-color:transparent!important}
.m-btn::after,.m-btn-2::after{background:var(--brand-ink)}
.m-btn:hover,.m-btn-2:hover,.btn:hover,.sticky-quote:hover{color:var(--button-ink)!important;filter:brightness(1.04)}
.m-btn:hover::after,.m-btn-2:hover::after{opacity:.08}
.m-btn::before,.m-btn-2::before{background:currentColor}
#navigation .nav__cta{--button-fill:var(--brand-yellow);--button-ink:var(--brand-ink);position:absolute;left:50%;transform:translateX(-50%);margin:0;min-height:56px;padding:14px 26px;font-size:clamp(19px,1.7vw,23px);letter-spacing:-.025em;white-space:nowrap;box-shadow:0 3px 18px #0002}
#navigation .nav__cta:hover{transform:translateX(-50%)}
#hero .hero__quote{--button-fill:var(--brand-cyan);--button-ink:var(--brand-ink)}
.sticky-quote{--button-fill:var(--brand-magenta);--button-ink:var(--brand-ink)}
.section-quote .m-btn{--button-fill:var(--brand-yellow);--button-ink:var(--brand-ink)}
#again .section-quote .m-btn{--button-fill:var(--brand-coral)}
#contact .m-btn{--button-fill:var(--brand-yellow);--button-ink:var(--brand-ink)}
#navigation .nav__menu{--button-fill:var(--brand-gold);--button-ink:var(--brand-ink)}
.motion-control{background:var(--brand-navy);color:white}
.btn.primary{--button-fill:var(--brand-yellow);--button-ink:var(--brand-ink)}
.btn.dark{--button-fill:var(--brand-navy);--button-ink:#fff}
.btn.subtle{background:transparent!important;color:var(--brand-navy)!important;border-color:transparent!important}
.hero-buttons .btn:not(.dark),.designer-banner .btn,#header-designer,#request-designer,#bottom-designer{--button-fill:var(--brand-coral);--button-ink:var(--brand-ink)}
.studio-nav .btn,#save-draft,#center-layer,#refresh-inbox{--button-fill:var(--brand-cyan);--button-ink:var(--brand-ink)}
#add-text,#submit-request,#top-quote,#request-quote{--button-fill:var(--brand-yellow);--button-ink:var(--brand-ink)}
#remove-layer{--button-fill:var(--brand-coral);--button-ink:var(--brand-ink)}
#undo,#redo,#export-requests{--button-fill:var(--brand-navy);--button-ink:white}
.product-grid .shop-product:nth-child(3n+1) .btn.primary{--button-fill:var(--brand-cyan);--button-ink:var(--brand-ink)}
.product-grid .shop-product:nth-child(3n+2) .btn.primary{--button-fill:var(--brand-magenta);--button-ink:var(--brand-ink)}
.product-grid .shop-product:nth-child(3n) .btn.primary{--button-fill:var(--brand-yellow);--button-ink:var(--brand-ink)}
.tool-tabs button.active,.view-tabs button.active,.category-buttons button.active{background:var(--brand-yellow);color:var(--brand-ink)}
.dialog-close{background:var(--brand-gold);color:var(--brand-ink)}
.m-icon{border-color:currentColor}.m-icon::after{background:var(--brand-cyan)}
.m-btn:focus-visible,.m-btn-2:focus-visible,.btn:focus-visible,.sticky-quote:focus-visible{outline:3px solid var(--brand-cyan);outline-offset:4px}
@media(max-width:899px){#navigation .nav__cta{display:none}}
/* Faithful export of the supplied Illustrator logo; white backing preserves its original contrast. */
#navigation .nav__brand{align-items:center;padding:6px;background:white;border-radius:10px;min-height:0;line-height:0;box-shadow:0 2px 15px #0002}
.actual-brand-logo{display:block;width:70px;height:76px;object-fit:contain}
.studio-logo{display:inline-flex;align-items:center;padding:3px 0;line-height:0}.studio-logo .actual-brand-logo{width:55px;height:60px}
.footer-brand{display:inline-flex;background:white;padding:16px;border-radius:14px;margin:25px 0 45px}.footer-brand .actual-brand-logo{width:145px;height:158px}
.footer-brand-small{display:inline-flex;align-items:center;flex-shrink:0}.footer-brand-small .actual-brand-logo{width:46px;height:50px}.site-footer{align-items:center}
@media(max-width:600px){#navigation .nav__brand{padding:5px;border-radius:8px}.actual-brand-logo{width:49px;height:54px}.studio-logo .actual-brand-logo{width:45px;height:50px}.footer-brand .actual-brand-logo{width:120px;height:130px}.site-footer{align-items:flex-start}}
/* Compact transparent logo paired with the restored wordmark. */
#navigation .nav__brand{padding:7px 13px;gap:10px;background:transparent;box-shadow:none;border-radius:0;align-items:center;line-height:1.2}
#navigation .nav__brand .actual-brand-logo{width:36px;height:40px;flex:none}
.brand-wordmark{display:inline-block;font-family:var(--font-1,Gabarito,Arial,sans-serif);font-weight:800;font-size:25px;letter-spacing:-1.25px;white-space:nowrap;color:inherit;line-height:1.15}
.brand-wordmark-dot{color:var(--brand-magenta)}
.studio-logo{gap:9px;line-height:1.15}.studio-logo .actual-brand-logo{width:32px;height:36px}.studio-logo .brand-wordmark{font-size:25px}
.footer-brand{background:transparent;padding:0;box-shadow:none}.footer-brand-small{background:transparent}
@media(max-width:600px){#navigation .nav__brand{padding:5px 0;gap:8px}#navigation .nav__brand .actual-brand-logo{width:29px;height:33px}#navigation .brand-wordmark{font-size:21px;letter-spacing:-1px}.studio-logo .actual-brand-logo{width:27px;height:30px}.studio-logo .brand-wordmark{font-size:21px;letter-spacing:-1px}.studio-logo{gap:6px}}
#contact .contact-map{margin-top:45px;border-radius:20px;overflow:hidden;background:#fff;color:#0c2231;box-shadow:0 8px 30px #0001}#contact .contact-map__heading{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:20px 25px}#contact .contact-map iframe{display:block;width:100%;height:380px;background:#e8eaed}#contact .contact-map__heading a{text-decoration:underline;white-space:nowrap}@media(max-width:600px){#contact .contact-map{margin-top:30px;border-radius:14px}#contact .contact-map__heading{padding:18px;align-items:flex-start;flex-direction:column;gap:8px}#contact .contact-map iframe{height:310px}}
#shop-map{scroll-margin-top:110px}
