:root{--pink:#ff0080;--pink-deep:#c2005f;--black:#080808;--white:#fff;--paper:#f5f5f5;--gray:#555}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:30px;overflow-x:hidden}
body{margin:0;background:white;color:var(--black);font-family:"Segoe UI",Arial,sans-serif;font-size:16px;line-height:1.6;position:relative;overflow-x:hidden}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:999;opacity:.035;background-image:radial-gradient(#000 1px,transparent 1px);background-size:3px 3px;mix-blend-mode:multiply}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
button,a,input,textarea,select{touch-action:manipulation}
:focus-visible{outline:3px solid var(--pink);outline-offset:4px}
img{max-width:100%;display:block}
h1,h2{text-shadow:.12em .12em 0 var(--pink)}
.preview-note{background:#080808;color:white;text-align:center;padding:8px 20px;font-size:12px}

/* header */
header{background:var(--black);border-bottom:6px solid var(--pink)}
.header-inner{max-width:1500px;margin:auto;padding:18px 5%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:12px;font-size:18px;font-weight:800;line-height:1.15;color:#fff}
.brand img{width:40px;height:40px;object-fit:contain;background:transparent;border-radius:0;padding:0;mix-blend-mode:screen}
.brand img.brand-banner{width:280px;height:auto;max-height:96px;object-fit:contain;background:#080808;border-radius:0;padding:0;mix-blend-mode:normal}
/* Use the supplied wide banner in the header brand area across every page. */
.header-inner .brand img{display:none}
.header-inner .brand span{display:none}
.header-inner .brand::before{content:"";display:block;width:360px;height:120px;background:#080808 url('../assets/mama-opossum-banner-v1.png') center/contain no-repeat}
.brand small{font-size:12px;font-weight:600;color:var(--pink)}
nav{display:flex;gap:28px;font-size:14px}
nav a{color:#fff;text-transform:uppercase;letter-spacing:.4px;font-weight:650}
nav a:hover,.text-link:hover{color:var(--pink)}
.button{display:inline-flex;justify-content:center;align-items:center;border:2px solid var(--black);background:var(--pink);color:#080808;font-weight:800;text-transform:uppercase;letter-spacing:.4px;padding:13px 23px;cursor:pointer;transition:transform .15s}
.button:hover{transform:translateY(-2px);box-shadow:4px 4px 0 var(--black)}
.small{font-size:13px;padding:10px 18px}

/* hero */
.hero{max-width:1500px;margin:auto;display:grid;grid-template-columns:.95fr 1.05fr;align-items:center;padding:55px 5%;gap:36px}
.intro{font-size:17px;font-weight:650;margin:0 0 18px}
.hero h1{font-family:Impact,"Arial Narrow",sans-serif;font-size:clamp(58px,6.8vw,110px);line-height:.98;letter-spacing:-2px;text-transform:uppercase;font-weight:400;margin:0 0 24px}
.hero-copy>p:not(.intro){max-width:450px}
.actions{display:flex;gap:24px;align-items:center;margin-top:28px}
.text-link{font-weight:700;text-decoration:underline;text-underline-offset:5px}
.fulfillment{font-size:13px;color:var(--gray);margin-top:26px}
.hero-art{position:relative;isolation:isolate}
.hero-art::before{content:"";position:absolute;inset:-12%;z-index:-1;background:radial-gradient(circle at 30% 30%,rgba(255,0,128,.45),transparent 60%),radial-gradient(circle at 75% 70%,rgba(255,0,128,.3),transparent 55%);filter:blur(2px)}
.logo-card{background:#fff;border:5px solid var(--black);padding:22px;transform:rotate(-2deg);box-shadow:10px 10px 0 var(--pink)}
.logo-card img{width:100%}
.stamp{position:absolute;right:-6px;bottom:-4px;transform:rotate(-7deg);background:var(--black);color:white;padding:9px 18px;font-weight:700;border:2px solid var(--pink);z-index:1}

/* marquee ribbon */
.ribbon{position:relative;background:var(--pink);overflow:hidden;border-top:3px solid var(--black);border-bottom:3px solid var(--black)}
.ribbon-track{display:flex;width:max-content;animation:marquee 22s linear infinite}
.ribbon-track.paused{animation-play-state:paused}
.ribbon-track span{white-space:nowrap;padding:14px 0;font-size:24px;font-weight:900;letter-spacing:.5px}
.marquee-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;border:2px solid var(--black);background:rgba(255,255,255,.55);color:var(--black);font-size:13px;line-height:1;cursor:pointer;display:grid;place-items:center;z-index:2}
.marquee-toggle:hover{background:#fff}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.section{max-width:1400px;margin:auto;padding:80px 5%}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:32px}
h2{font-size:clamp(32px,3.3vw,50px);line-height:1.12;letter-spacing:-1.8px;margin:0 0 16px}
h3{line-height:1.25;margin:0;font-weight:750}
.section-heading p{margin:0;color:var(--gray)}
.note{font-size:12px;color:var(--gray)}
.tag-flag{background:var(--pink);color:#080808;font-weight:800;font-size:12px;padding:7px 16px 7px 12px;display:inline-block;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,8px 50%)}

/* products */
.products{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.products article{background:#fff;border:4px solid var(--black);padding:14px 14px 18px;box-shadow:8px 8px 0 rgba(8,8,8,.15);transition:transform .2s,box-shadow .2s}
.products article:nth-child(1){transform:rotate(-1.4deg)}
.products article:nth-child(2){transform:rotate(1deg)}
.products article:nth-child(3){transform:rotate(-1deg)}
.products article:hover{transform:rotate(0) translateY(-6px);box-shadow:8px 14px 0 rgba(8,8,8,.2)}
.product-photo{position:relative;overflow:hidden;aspect-ratio:1/1.42;background-image:url("../assets/launch-product-mockups.png");background-size:300% auto;background-repeat:no-repeat;background-color:#f6f6f6}
.photo-tee{background-position:left}
.photo-hoodie{background-position:center}
.photo-hat{background-position:right}
.corner-tag{position:absolute;top:14px;right:-36px;background:var(--black);color:#fff;font-weight:900;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;padding:5px 42px;transform:rotate(40deg);box-shadow:0 2px 0 rgba(0,0,0,.3)}
.product-info{display:flex;justify-content:space-between;gap:10px;padding:16px 4px 4px}
.product-info h3{font-size:20px}
.product-info p{font-size:14px;color:var(--gray);margin:7px 0 0}
.round{border:2px solid var(--black);background:white;width:36px;height:36px;border-radius:50%;flex-shrink:0;cursor:pointer;font-size:22px}
.round:hover{background:var(--pink)}

/* services band */
.services-band{position:relative;background:var(--black);color:#fff}
.services-band::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle at 8% 15%,rgba(255,0,128,.5) 0 10px,transparent 11px),radial-gradient(circle at 92% 10%,rgba(255,0,128,.35) 0 16px,transparent 17px),radial-gradient(circle at 25% 85%,rgba(255,0,128,.3) 0 7px,transparent 8px),radial-gradient(circle at 70% 90%,rgba(255,0,128,.45) 0 12px,transparent 13px),radial-gradient(circle at 50% 45%,rgba(255,0,128,.2) 0 20px,transparent 21px),radial-gradient(circle at 95% 60%,rgba(255,0,128,.3) 0 6px,transparent 7px),radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:auto,auto,auto,auto,auto,auto,7px 7px}
.services-band .section{position:relative;padding-top:60px;padding-bottom:60px}
.services-band h2,.services-band .section-heading p{color:#fff}
.services-band .section-heading p{color:#d8d8d8}
.torn{position:absolute;left:0;right:0;height:30px;background:var(--black);z-index:2}
.torn-top{top:-30px;clip-path:polygon(0% 100%,4% 35%,8% 100%,12% 30%,16% 100%,20% 45%,24% 100%,28% 25%,32% 100%,36% 50%,40% 100%,44% 20%,48% 100%,52% 40%,56% 100%,60% 30%,64% 100%,68% 50%,72% 100%,76% 25%,80% 100%,84% 45%,88% 100%,92% 30%,96% 100%,100% 40%,100% 100%,0% 100%)}
.torn-bottom{bottom:-30px;clip-path:polygon(0% 0%,4% 65%,8% 0%,12% 70%,16% 0%,20% 55%,24% 0%,28% 75%,32% 0%,36% 50%,40% 0%,44% 80%,48% 0%,52% 60%,56% 0%,60% 70%,64% 0%,68% 50%,72% 0%,76% 75%,80% 0%,84% 55%,88% 0%,92% 70%,96% 0%,100% 60%,100% 0%,0% 0%)}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.service{position:relative;min-height:365px;overflow:hidden;padding:28px;display:flex;align-items:end;isolation:isolate;border:5px solid var(--black);transition:transform .2s}
.service img{position:absolute;width:175px;height:175px;object-fit:contain;right:14px;top:16px;background:#fff;border-radius:50%;padding:14px}
.service h3{font-size:28px;letter-spacing:-1px}
.service p{font-size:14px;margin:12px 0}
.service span{font-size:13px;font-weight:750;text-decoration:underline;text-underline-offset:5px}
.service div{padding-top:150px}
.custom{background:#fff;color:#080808;transform:rotate(-1.4deg)}
.teams{background:#0c0c0c;color:#fff;border-color:var(--pink);transform:rotate(1deg)}
.groups{background:var(--pink);color:#080808;transform:rotate(-1deg)}
.service:hover{transform:rotate(0) translateY(-5px)}
.service:hover span{text-decoration-thickness:3px}

/* story */
.story{display:grid;grid-template-columns:1fr 1fr;gap:75px;align-items:center}
.story-art{background:var(--paper);padding:28px;border:4px solid var(--black);transform:rotate(-3deg)}
.story-art img{max-height:420px;margin:auto}
.story p{max-width:510px;color:#444}

/* steps */
.order-section{border-top:1px solid #ddd}
.steps{list-style:none;counter-reset:step;display:grid;grid-template-columns:repeat(3,1fr);gap:40px;padding:25px 0 0;margin:0}
.steps li{counter-increment:step;border-top:3px solid #080808;padding-top:18px}
.steps li:before{content:counter(step);background:var(--pink);color:#080808;width:34px;height:34px;display:grid;place-items:center;font-weight:800;margin-bottom:18px;border-radius:50%;border:2px solid #080808;transform:rotate(-6deg)}
.steps p{font-size:15px;color:#444}

/* quote */
.quote-band{position:relative;background:var(--black);border-top:8px solid var(--pink)}
.quote-band::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle at 12% 20%,rgba(255,0,128,.4) 0 14px,transparent 15px),radial-gradient(circle at 88% 75%,rgba(255,0,128,.35) 0 18px,transparent 19px),radial-gradient(circle at 60% 10%,rgba(255,0,128,.25) 0 8px,transparent 9px),radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:auto,auto,auto,7px 7px}
.quote{position:relative;display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;max-width:1400px;color:#fff}
.quote h2{color:#fff}
.quote>div>p{max-width:370px;color:#ddd}
.demo-callout{font-size:13px;color:#eee!important;border-left:3px solid var(--pink);padding-left:15px}
.form-card{background:#fff;color:#080808;border:4px solid var(--black);padding:30px;box-shadow:10px 10px 0 var(--pink)}
label{display:block;font-size:14px;font-weight:650;margin-bottom:20px}
input,textarea,select{display:block;width:100%;background:white;border:1px solid #a0a0a0;border-radius:0;padding:12px;color:#080808;margin-top:7px;font-size:15px}
textarea{resize:vertical}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.file-label small{display:block;font-size:12px;font-weight:400;margin-top:8px}
.file-label span{font-weight:400}
.form-card .button{width:100%}
output{display:none;padding:20px;background:var(--paper);border:2px solid #080808;white-space:pre-wrap;font-size:14px;margin-top:20px}
output.visible{display:block}

/* footer */
.footer-band{background:var(--black);border-top:4px solid var(--pink)}
footer{max-width:1400px;margin:auto;padding:45px 5%;display:flex;align-items:center;justify-content:space-between;gap:25px;font-size:13px;color:#ddd}
footer .brand{font-size:15px;color:#fff}
footer img{height:40px!important;width:40px!important}
footer>a:first-child{display:block;width:360px;height:120px;font-size:0;background:#080808 url('../assets/mama-opossum-banner-v1.png') center/contain no-repeat}
footer>a:first-child img,footer>a:first-child span{display:none}
footer a:hover{color:var(--pink)}
.owner-link{color:#555;font-size:11px;text-decoration:none}
.owner-link:hover{color:var(--pink)}

/* dialog */
dialog{position:relative;border:4px solid black;max-width:540px;width:calc(100% - 35px);padding:38px;overflow:hidden}
dialog::backdrop{background:#0009}
.close{position:absolute;top:8px;right:14px;background:none;border:0;font-size:30px;cursor:pointer;z-index:2}
.corner-tag-dialog{top:18px;left:-36px;right:auto;transform:rotate(-40deg);background:var(--pink);color:#080808}
dialog h2{font-size:34px}
dialog p{font-size:15px}

.banners-only .service-grid{grid-template-columns:1fr}
.banners-only .service{min-height:250px}
.banners-only .service img{width:230px;height:230px;right:24px;top:14px}
.banners-only .service div{padding-top:0}
.banners-only .service h3{font-size:45px}

@media(max-width:900px){
nav{gap:14px;font-size:12px}
.hero{gap:10px}
.actions{align-items:start;flex-direction:column;gap:18px}
.service{padding:20px}
.service h3{font-size:24px}
.story{gap:35px}
.quote{gap:35px}
footer{flex-wrap:wrap}
}
@media(max-width:650px){
.header-inner .brand::before{width:240px;height:80px}
.footer-band footer>a:first-child{width:240px;height:80px}
.header-inner{flex-wrap:wrap;padding:14px 5%;gap:15px}
.header-inner nav{order:3;width:100%;justify-content:space-between;border-top:1px solid #333;padding-top:13px}
.header-inner .brand{font-size:16px}
.hero{grid-template-columns:1fr;padding-top:35px;padding-bottom:40px}
.hero h1{font-size:60px}
.hero-art{max-width:420px;margin:0 auto;order:-1}
.logo-card{padding:14px}
.hero-art .stamp{font-size:12px;bottom:-10px}
.hero-copy{padding-top:16px}
.intro{font-size:14px;margin-bottom:12px}
.actions{flex-direction:row;align-items:center;gap:20px}
.actions .button{font-size:13px;padding:12px}
.actions .text-link{font-size:13px}
.section{padding:50px 5%}
.section-heading{display:block}
.section-heading .note{display:block;margin-top:12px}
.products{grid-template-columns:1fr;gap:26px}
.products article{transform:none!important}
.product-photo{aspect-ratio:1/1.15;background-size:300% auto}
.product-info h3{font-size:22px}
.service-grid{grid-template-columns:1fr}
.service{min-height:265px;transform:none!important}
.service div{padding-top:95px}
.service h3{font-size:28px}
.service img{width:150px;height:150px;top:14px;right:14px}
.story,.quote{grid-template-columns:1fr}
.story-art{max-width:340px;margin:auto}
.story p{font-size:15px}
.form-card{padding:20px}
.steps{grid-template-columns:1fr;gap:15px}
.steps li{padding-top:14px}
.steps li:before{float:left;margin-right:15px}
.steps p{clear:both;padding-top:10px}
.field-row{grid-template-columns:1fr;gap:0}
.ribbon-track span{font-size:17px}
footer{display:block}
footer p{margin:22px 0}
.torn{height:18px}
.torn-top{top:-18px}
.torn-bottom{bottom:-18px}
.banners-only .service img{width:140px;height:140px;right:10px;top:10px}
.banners-only .service h3{font-size:28px}
.banners-only .service div{padding-top:100px}
}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*{transition:none!important;animation:none!important}
}