*{box-sizing:border-box}
:root{
  --yellow:#f4d875;
  --yellow-soft:#f7e39a;
  --yellow-pale:#faedbd;
  --ink:#302329;
  --paper:#fffaf0;
  --orange:#df8d2c;
  --line:rgba(48,35,41,.20);
}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--yellow);
  color:var(--ink);
  font-family:"DM Sans",sans-serif;
}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}
.yellow-page{background:var(--yellow)}

/* Full-width yellow navigation */
.topbar{
  position:sticky;
  top:0;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  padding:18px 5vw;
  background:rgba(244,216,117,.93);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(48,35,41,.16);
}
.logo{display:grid;line-height:.8}
.logo span,.logo strong{
  font:800 23px/1 "Barlow Condensed";
  letter-spacing:.18em;
}
.logo small{
  font-size:8px;
  letter-spacing:.25em;
  margin-top:7px;
}
.topbar nav{
  display:flex;
  gap:26px;
  align-items:center;
  font:700 12px "Barlow Condensed";
  letter-spacing:.13em;
  text-transform:uppercase;
}
.topbar nav a{position:relative}
.topbar nav a:not(.order-link)::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:100%;
  height:2px;
  background:var(--ink);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .25s ease;
}
.topbar nav a:hover::after{
  transform:scaleX(1);
  transform-origin:left;
}
.order-link{
  background:var(--ink);
  color:#fff;
  padding:11px 16px;
  transition:transform .2s,box-shadow .2s;
}
.order-link:hover{
  transform:translate(-3px,-3px);
  box-shadow:5px 5px 0 rgba(255,255,255,.75);
}
.menu{display:none;background:none;border:0;font-weight:800}

/* Full-bleed hero */
.hero{
  position:relative;
  min-height:720px;
  display:grid;
  grid-template-columns:.88fr 1.12fr;
  align-items:center;
  width:100%;
  margin:0;
  padding:0 5vw;
  background:var(--yellow);
  overflow:hidden;
}
.hero-copy{
  padding:7vw 2vw 7vw 0;
  z-index:2;
}
.micro{
  font:700 11px "Barlow Condensed";
  letter-spacing:.24em;
}
.hero h1{
  font:800 clamp(63px,8vw,122px)/.76 "Barlow Condensed";
  letter-spacing:.01em;
  margin:22px 0;
}
.hero h1 em{font-style:normal;color:#fff}
.intro{max-width:510px;font-size:17px}
.actions{
  display:flex;
  align-items:center;
  gap:25px;
  margin:35px 0;
}
.button{
  display:inline-block;
  padding:15px 22px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  transition:transform .22s,box-shadow .22s;
}
.button:hover{transform:translate(-4px,-4px)}
.button.dark{
  background:var(--ink);
  color:#fff;
}
.button.dark:hover{box-shadow:7px 7px 0 rgba(255,255,255,.8)}
.button.light{
  background:#fff;
  color:var(--ink);
}
.text-link{font-weight:800}
.mini-proof{
  display:grid;
  border-left:4px solid var(--ink);
  padding-left:15px;
}
.mini-proof span{font-size:13px}
.hero-art{
  position:relative;
  height:100%;
  min-height:650px;
  display:grid;
  place-items:center;
}
.hero-art img{
  position:relative;
  z-index:2;
  width:min(88%,760px);
  filter:drop-shadow(0 30px 32px #5d452b33);
  animation:float 5s ease-in-out infinite;
}
.orbit{
  position:absolute;
  border:2px solid rgba(48,35,41,.20);
  border-radius:50%;
  animation:spin 12s linear infinite;
}
.orbit-a{width:520px;height:520px}
.orbit-b{width:650px;height:650px;animation-direction:reverse}
.hero-stamp{
  position:absolute;
  z-index:4;
  right:8%;
  bottom:12%;
  width:100px;
  height:100px;
  border-radius:50%;
  display:grid;
  place-items:center;
  text-align:center;
  background:var(--ink);
  color:#fff;
  transform:rotate(7deg);
}
.palette{
  position:absolute;
  right:0;
  top:0;
  height:100%;
  width:50px;
  display:grid;
}
.palette i:nth-child(1){background:#fff}
.palette i:nth-child(2){background:#f3e6af}
.palette i:nth-child(3){background:var(--orange)}
.palette i:nth-child(4){background:var(--ink)}
@keyframes float{50%{transform:translateY(-16px) rotate(-1deg)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* Every main area remains on the yellow canvas */
.statement{
  text-align:center;
  padding:110px 5vw 50px;
  background:var(--yellow);
}
.statement p{
  font:700 14px "Barlow Condensed";
  letter-spacing:.35em;
}
.statement h2,.bundle h2,.final-cta h2,dialog h2{
  font:800 clamp(44px,6vw,88px)/.9 "Barlow Condensed";
  margin:8px 0;
}

.products{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  padding:0 5vw 105px;
  background:var(--yellow);
}
.product{
  background:rgba(255,250,240,.92);
  overflow:hidden;
  border:1px solid rgba(48,35,41,.12);
  box-shadow:0 16px 35px rgba(48,35,41,.09);
  transition:transform .3s,box-shadow .3s;
}
.product:hover{
  transform:translateY(-8px);
  box-shadow:0 26px 45px rgba(48,35,41,.16);
}
.product.large{grid-column:span 2}
.image-wrap{
  height:520px;
  padding:50px;
  background:var(--yellow-pale);
}
.image-wrap img{
  width:100%;
  height:100%;
  object-fit:contain;
  transition:.6s;
}
.product:hover .image-wrap img{transform:scale(1.06) rotate(-1deg)}
.mock{
  height:350px;
  display:grid;
  place-items:center;
  background:var(--yellow-soft);
  overflow:hidden;
}
.mock img{width:65%;transition:.5s}
.product:hover .mock img{transform:scale(1.12)}
.mock.mug img{clip-path:inset(5% 6% 5% 6% round 18px)}
.mock.shirt img{
  clip-path:polygon(25% 0,75% 0,100% 20%,80% 38%,78% 100%,22% 100%,20% 38%,0 20%);
}
.mock.towel img{
  width:75%;
  transform:rotate(4deg);
  box-shadow:0 22px 34px #0002;
}
.product-copy{padding:25px}
.product-copy span{
  font:700 10px "Barlow Condensed";
  letter-spacing:.18em;
}
.product-copy h3{
  font:800 34px "Barlow Condensed";
  margin:7px 0;
}
.product-copy>div{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.product-copy button{
  border:0;
  background:var(--ink);
  color:#fff;
  padding:9px 13px;
  font-weight:700;
  cursor:pointer;
  transition:transform .2s,box-shadow .2s;
}
.product-copy button:hover{
  transform:translate(-3px,-3px);
  box-shadow:4px 4px 0 var(--orange);
}

/* Bundle changed from dark panel to yellow-on-yellow merchandising block */
.bundle{
  margin:0;
  padding:95px 5vw;
  background:var(--yellow-soft);
  color:var(--ink);
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:50px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.bundle-options{display:grid;gap:12px}
.bundle-options button{
  display:grid;
  grid-template-columns:1fr auto;
  text-align:left;
  padding:20px;
  border:1px solid rgba(48,35,41,.28);
  background:rgba(255,250,240,.72);
  color:var(--ink);
  font:700 18px "Barlow Condensed";
  letter-spacing:.08em;
  transition:.25s;
  cursor:pointer;
}
.bundle-options button small{
  grid-column:2;
  color:#a94f13;
}
.bundle-options button:hover,
.bundle-options button.selected{
  background:var(--ink);
  color:#fff;
  transform:translateX(8px);
  box-shadow:8px 8px 0 var(--orange);
}
.bundle-options button:hover small,
.bundle-options button.selected small{color:var(--yellow)}
.bundle-total{
  grid-column:1/-1;
  display:flex;
  gap:20px;
  align-items:center;
  border-top:1px solid var(--line);
  padding-top:24px;
}
.bundle-total span{opacity:.65}
.bundle-total strong{flex:1}
.bundle-total a{
  background:var(--ink);
  color:#fff;
  padding:12px 17px;
  font-weight:800;
}

/* Yellow process panels */
.process{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  padding:100px 5vw;
  background:var(--yellow);
}
.process article{
  padding:30px;
  border:1px solid rgba(48,35,41,.22);
  background:rgba(255,250,240,.34);
  transition:background .25s,transform .25s;
}
.process article:hover{
  background:rgba(255,250,240,.9);
  transform:translateY(-7px);
}
.process b{
  font:800 46px "Barlow Condensed";
  color:var(--orange);
}
.process h3{
  font:800 31px "Barlow Condensed";
  margin:8px 0;
}

/* Requested exception: review remains contrasting */
.review{
  padding:110px 14vw;
  background:var(--ink);
  color:#fff;
}
.review blockquote{
  font:800 clamp(38px,5vw,72px)/1 "Barlow Condensed";
  margin:0;
}
.review p{
  color:var(--yellow);
  letter-spacing:.16em;
}

/* Return to yellow after review */
.final-cta{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  align-items:center;
  background:var(--yellow);
  border-top:1px solid rgba(48,35,41,.16);
}
.final-cta img{
  height:650px;
  width:100%;
  object-fit:cover;
}
.final-cta div{padding:7vw}

/* Requested exception: dark footer */
footer{
  display:flex;
  justify-content:space-between;
  padding:30px 5vw;
  background:var(--ink);
  color:#fff;
}

dialog{
  border:0;
  padding:35px;
  max-width:620px;
  width:90%;
  box-shadow:0 30px 90px #0006;
  background:var(--paper);
}
dialog::backdrop{background:#302329cc}
dialog>button{
  float:right;
  border:0;
  background:none;
  font-size:30px;
}
form{display:grid;gap:14px}
label{display:grid;gap:5px;font-weight:700}
input,select,textarea{
  padding:12px;
  border:1px solid #30232944;
  background:#fff;
}
form button{
  padding:15px;
  border:0;
  background:var(--ink);
  color:#fff;
  font-weight:800;
}
.reveal{
  opacity:0;
  transform:translateY(30px);
  transition:.7s;
}
.reveal.revealed{opacity:1;transform:none}

@media(max-width:900px){
  .topbar nav{
    display:none;
    position:absolute;
    top:100%;
    left:5%;
    right:5%;
    background:var(--paper);
    padding:20px;
    flex-direction:column;
    box-shadow:0 18px 35px rgba(48,35,41,.18);
  }
  .topbar nav.open{display:flex}
  .menu{display:block}
  .hero{
    grid-template-columns:1fr;
    padding:0 7vw;
  }
  .hero-copy{padding:60px 0 20px}
  .hero-art{min-height:440px}
  .palette{display:none}
  .products{grid-template-columns:1fr}
  .product.large{grid-column:auto}
  .bundle,.final-cta{grid-template-columns:1fr}
  .process{grid-template-columns:1fr 1fr}
  .bundle-total{
    align-items:flex-start;
    flex-direction:column;
  }
  .final-cta img{height:auto}
}
@media(max-width:560px){
  .hero h1{font-size:58px}
  .actions{align-items:flex-start;flex-direction:column}
  .process{grid-template-columns:1fr}
  .review{padding:80px 8vw}
  footer{flex-direction:column;gap:8px}
}


/* Commission form */
.commission-dialog{
  width:min(920px,94vw);
  max-height:92vh;
  padding:0;
  border:0;
  background:#fffaf0;
  color:#302329;
  box-shadow:0 30px 100px rgba(48,35,41,.45);
}
.commission-dialog::backdrop{
  background:rgba(48,35,41,.78);
  backdrop-filter:blur(6px);
}
.commission-dialog>p,
.commission-dialog>h2,
.commission-dialog>form{
  margin-left:clamp(22px,5vw,55px);
  margin-right:clamp(22px,5vw,55px);
}
.commission-dialog>.micro{margin-top:45px}
.commission-dialog>h2{
  font:800 clamp(42px,7vw,78px)/.9 "Barlow Condensed";
  margin-top:5px;
  margin-bottom:14px;
}
.dialog-intro{max-width:700px}
.dialog-close{
  position:sticky;
  z-index:5;
  top:12px;
  float:right;
  margin:12px 12px 0 0;
  width:44px;
  height:44px;
  padding:0;
  border:0;
  border-radius:50%;
  background:#302329;
  color:#fff;
  font-size:28px;
  line-height:1;
  cursor:pointer;
}
#commission-form{padding-bottom:45px}
#commission-form fieldset{
  margin:28px 0 0;
  padding:22px;
  border:1px solid rgba(48,35,41,.24);
  background:rgba(244,216,117,.30);
}
#commission-form legend{
  padding:0 9px;
  font:800 25px "Barlow Condensed";
}
.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
#commission-form label{
  display:grid;
  gap:6px;
  font-weight:700;
}
#commission-form input,
#commission-form select,
#commission-form textarea{
  width:100%;
  padding:12px 13px;
  border:1px solid rgba(48,35,41,.35);
  border-radius:0;
  background:#fff;
  color:#302329;
}
#commission-form input:focus,
#commission-form select:focus,
#commission-form textarea:focus{
  outline:3px solid rgba(223,141,44,.25);
  border-color:#df8d2c;
}
.field-help,
.privacy-note{
  font-size:13px;
  color:#66575d;
}
.product-check-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.check-card{
  grid-template-columns:auto 1fr!important;
  align-items:start;
  gap:10px!important;
  padding:13px;
  border:1px solid rgba(48,35,41,.23);
  background:#fffaf0;
  cursor:pointer;
  transition:transform .2s,background .2s,box-shadow .2s;
}
.check-card:hover{
  transform:translateY(-3px);
  box-shadow:5px 5px 0 #df8d2c;
}
.check-card input{
  width:auto!important;
  margin-top:4px;
}
.check-card b,
.check-card small{display:block}
.check-card small{font-weight:400;color:#66575d}
.file-drop{
  display:flex!important;
  align-items:center;
  justify-content:space-between;
  gap:18px!important;
  padding:22px;
  border:2px dashed #302329;
  background:#f4d875;
  cursor:pointer;
}
.file-drop span b,
.file-drop span small{display:block}
.file-drop input{max-width:340px;background:#fff!important}
.image-preview{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin-top:14px;
}
.preview-card{
  padding:7px;
  background:#fff;
  border:1px solid rgba(48,35,41,.2);
}
.preview-card img{
  width:100%;
  height:125px;
  object-fit:cover;
}
.preview-card span{
  display:block;
  overflow:hidden;
  margin-top:5px;
  font-size:10px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.consent-row{
  grid-template-columns:auto 1fr!important;
  align-items:start;
  gap:10px!important;
  margin:10px 0;
  font-size:13px;
  font-weight:500!important;
}
.consent-row input{width:auto!important;margin-top:4px}
.consent-row.optional{opacity:.82}
.form-status{
  display:none;
  margin-top:20px;
  padding:14px;
  font-weight:700;
}
.form-status.error{
  display:block;
  background:#f4cbc7;
  border-left:5px solid #a52c22;
}
.form-status.success{
  display:block;
  background:#d8edce;
  border-left:5px solid #38752b;
}
.commission-submit{
  width:100%;
  margin-top:18px;
  padding:16px;
  border:0;
  background:#302329;
  color:#fff;
  font:800 18px "Barlow Condensed";
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
}
.commission-submit:hover{
  transform:translate(-3px,-3px);
  box-shadow:7px 7px 0 #df8d2c;
}
.commission-submit:disabled{opacity:.6;cursor:wait}
.honeypot{
  position:absolute!important;
  left:-99999px!important;
  width:1px!important;
  height:1px!important;
  opacity:0!important;
}
@media(max-width:760px){
  .form-grid,
  .product-check-grid{grid-template-columns:1fr}
  .image-preview{grid-template-columns:1fr 1fr}
  .file-drop{align-items:flex-start;flex-direction:column}
}