:root{--red:#f10b18;--cream:#f0dfd5;--black:#050505}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#050505}
body{margin:0;background:#050505;color:#fff;font-family:Oswald,Arial,sans-serif}
.filter-defs{position:absolute;pointer-events:none}
button,a{font:inherit}
.page{width:min(100%,1122px);margin:auto;overflow:hidden;background:#070707}
.hero{position:relative;isolation:isolate;min-height:722px;padding:18px 7.2% 14px;background:#080808}
.hero:before{content:"";position:absolute;z-index:-3;inset:0;background:
 radial-gradient(circle at 83% 14%,rgba(238,0,20,.35),transparent 20%),
 radial-gradient(circle at 15% 70%,rgba(255,0,20,.19),transparent 24%),
 linear-gradient(#080808 0 48px,transparent 48px) left top/88px 100% no-repeat,
 linear-gradient(#080808 0 48px,transparent 48px) right top/140px 100% no-repeat,
 url(hero-edge-left.png) left top/auto 100% no-repeat,
 url(hero-edge-right.png) right top/auto 100% no-repeat,#080808}
.hero:after{content:none}
.nav{height:40px;display:grid;grid-template-columns:54px auto auto 1fr auto auto 54px;gap:26px;align-items:center;position:relative;z-index:5;text-transform:uppercase;font:600 13px/1 Oswald,sans-serif;letter-spacing:.12em}
.nav a,.nav button{border:0;background:none;color:#fff;text-decoration:none;text-transform:uppercase;cursor:pointer;padding:10px 0;text-shadow:0 2px 3px #000}
.menu{width:54px;height:40px;display:grid;place-content:center;gap:6px;background:rgba(0,0,0,.7)!important;border-radius:6px!important}
.menu span{display:block;width:30px;height:3px;background:#fff}
.cart{height:40px;background:rgba(0,0,0,.7)!important;border-radius:6px!important}
.cart span{display:block;width:27px;height:17px;border:3px solid #fff;border-top:0;transform:skew(-10deg);margin:auto;position:relative}
.cart span:after{content:"";position:absolute;left:2px;right:2px;bottom:-9px;border-bottom:3px dotted #fff}
.brand{width:100%;height:240px;margin:-30px auto -5px;overflow:hidden;filter:drop-shadow(0 6px 2px #000)}
.brand img{display:block;width:110%;height:240px;object-fit:fill;transform:translateX(-5%);filter:url(#remove-logo-black) drop-shadow(0 6px 2px #000)}
.kicker{text-align:center;text-transform:uppercase;letter-spacing:.16em;font-size:16px;margin:0 0 2px;text-shadow:0 3px 2px #000}
h1{margin:0;text-align:center;text-transform:uppercase;font:700 clamp(49px,6vw,69px)/.95 Bebas Neue,Impact,sans-serif;letter-spacing:.015em;color:var(--cream);text-shadow:0 4px 0 #2b1510,0 7px 5px #000}
h1 em{font-style:normal;color:var(--red)}
.strap{text-align:center;text-transform:uppercase;font-size:18px;letter-spacing:.13em;margin:5px 0 10px;text-shadow:0 2px 2px #000}
.strap b{color:#ddd;padding:0 10px}
.transformation{display:grid;grid-template-columns:1fr 26px 1.25fr;gap:15px;align-items:center;width:85%;margin:12px auto 0}
figure{position:relative;margin:0;min-width:0}
.torn,.after-card{position:relative;padding:10px;background:#eadcd4;clip-path:polygon(0 4%,4% 1%,11% 3%,18% 0,27% 2%,35% 0,45% 2%,54% 0,64% 2%,74% 0,84% 2%,94% 0,100% 4%,98% 14%,100% 25%,98% 37%,100% 49%,98% 62%,100% 74%,98% 86%,100% 97%,94% 100%,84% 98%,73% 100%,62% 98%,51% 100%,40% 98%,29% 100%,18% 98%,7% 100%,0 96%,2% 83%,0 70%,2% 57%,0 44%,2% 31%,0 17%);filter:drop-shadow(0 8px 7px #000)}
.torn{overflow:hidden}.torn img{display:block;width:100%;height:283px;object-fit:cover;object-position:center 54%;transform:none}
.after-card{background:#dedede;padding:10px}
.after-card img{display:block;width:100%;height:283px;object-fit:cover;object-position:center 43%;transform:none}
figcaption{position:absolute;bottom:-12px;left:-16px;background:#e7d4cb;color:#090909;padding:3px 18px 6px;font:400 30px/1 Permanent Marker,cursive;text-transform:uppercase;transform:rotate(-7deg);box-shadow:0 4px 5px #000}
.after figcaption{left:auto;right:-18px;transform:rotate(-5deg)}
.slash{height:170px;background:var(--red);clip-path:polygon(42% 0,100% 0,60% 42%,100% 42%,0 100%,35% 52%,0 52%);filter:drop-shadow(0 4px 3px #000)}
.process img{display:block;width:100%;height:auto}
.house img{display:block;width:100%;height:auto}
.order h2{margin:0;color:var(--red);font:400 38px/.84 Permanent Marker,cursive;text-transform:uppercase;transform:rotate(-7deg);text-shadow:3px 4px 0 #000}
.order{height:172px;padding:12px 3.5% 13px;display:grid;grid-template-columns:18% 1fr;gap:18px;align-items:center;background:linear-gradient(90deg,#050505,#151515 50%,#050505);border-top:8px solid #272727;overflow:hidden}
.order form{display:grid;grid-template-columns:1.25fr .9fr .9fr 1fr 1.1fr 1.45fr;grid-template-rows:41px 41px 15px;gap:6px 9px;align-items:end}
.order label{display:grid;gap:4px;color:#eee;text-transform:uppercase;font:600 11px/1 Oswald,sans-serif;letter-spacing:.08em}
.order input,.order select,.order textarea{width:100%;min-height:29px;padding:5px 7px;background:#202020;color:#fff;border:1px solid #777;border-radius:3px;font:400 12px/1 Arial,sans-serif}
.order textarea{height:29px;min-height:29px;resize:none}
.upload{grid-column:1;grid-row:1/3;position:relative;min-height:88px;border:2px dashed #888;border-radius:4px;place-content:center;text-align:center}
.order label:nth-of-type(2){grid-column:2;grid-row:1}.order label:nth-of-type(3){grid-column:3;grid-row:1}.order label:nth-of-type(4){grid-column:4/6;grid-row:1}.order label:nth-of-type(5){grid-column:2;grid-row:2}.order label:nth-of-type(6){grid-column:3;grid-row:2}.order label:nth-of-type(7){grid-column:4;grid-row:2}.order label:nth-of-type(8){grid-column:5;grid-row:2}
.upload input{position:absolute;inset:0;opacity:0;cursor:pointer}
.upload strong{font:500 13px Oswald,sans-serif}
.order button{grid-column:6;grid-row:1/3;min-height:59px;border:0;border-radius:4px;background:var(--red);color:#fff;text-transform:uppercase;font:600 18px/1 Bebas Neue,sans-serif;letter-spacing:.04em;cursor:pointer}
.order form>p{grid-column:6;grid-row:3;margin:0;text-align:center;text-transform:uppercase;font:500 10px/1 Oswald,sans-serif;letter-spacing:.04em}
.hp{position:absolute!important;left:-9999px!important}
@media(max-width:700px){
 body{overflow-x:hidden}.page{width:100%;max-width:100vw}
 .hero{min-height:0;padding:10px 3% 22px}
 .hero:before{background:
  radial-gradient(circle at 83% 14%,rgba(238,0,20,.30),transparent 20%),
  radial-gradient(circle at 15% 70%,rgba(255,0,20,.16),transparent 24%),
  url(hero-edge-left.png) left top/12% 100% no-repeat,
  url(hero-edge-right.png) right top/12% 100% no-repeat,#080808}
 .nav{height:42px;grid-template-columns:46px 1fr 1fr 46px;gap:12px}.nav-spacer,.nav button:not(.menu):not(.cart){display:none}.nav a{text-align:center}.menu,.cart{width:46px}
 .brand{width:100%;height:29vw;margin:-2px auto -2px}.brand img{width:108%;height:29vw;object-fit:fill;transform:translateX(-4%)}
 .kicker{max-width:100%;font-size:7.5px;letter-spacing:.055em;white-space:nowrap}.hero h1{font-size:clamp(28px,8.3vw,40px);white-space:nowrap;letter-spacing:0}.strap{font-size:8.5px;letter-spacing:.035em;white-space:nowrap}.strap b{padding:0 2px}
 .transformation{width:92%;grid-template-columns:minmax(0,1fr) 9px minmax(0,1.28fr);gap:6px;margin-top:10px}.torn,.after-card{padding:5px;overflow:hidden}.torn img,.after-card img{height:31vw;min-height:120px}.after-card img{transform:none}.slash{height:78px}figcaption{font-size:16px;left:-4px;bottom:-7px;padding:2px 8px 4px}.after figcaption{right:-4px}
 .process img,.house img{width:100%;height:auto}
 .order{position:relative;height:14.26vw;min-height:0;padding:0;background:#050505 url(stage6-order-approved.png?v=202610061425) center/100% 100% no-repeat;border:0;display:block;overflow:hidden}.order h2{display:none}.order form{position:absolute;left:21.66%;top:19.38%;width:75.22%;height:56.88%;display:block}.order label,.order button,.order form>p{position:absolute;margin:0}.order label{font-size:0;display:block}.order input:not([type=file]):not(.hp),.order select,.order textarea{height:2.67vw;min-height:0;padding:0 4px;font-size:8px}.order input[type=file]{opacity:0}.upload{left:0;top:0;width:14.81%;height:97%;min-height:0;border:0}.upload strong{opacity:0}.order label:nth-of-type(2){left:16.11%;top:0;width:16.59%}.order label:nth-of-type(3){left:33.89%;top:0;width:16.94%}.order label:nth-of-type(4){left:52.37%;top:0;width:18.36%}.order label:nth-of-type(5){left:16.11%;top:54%;width:11.97%}.order label:nth-of-type(6){left:29.15%;top:54%;width:10.43%}.order label:nth-of-type(7){left:40.76%;top:54%;width:11.02%}.order label:nth-of-type(8){left:52.61%;top:54%;width:18.25%}.order button{left:72.16%;top:10%;width:27.84%;height:48%;min-height:0;opacity:.01}.order form>p{left:72.16%;top:74%;width:27.84%;opacity:0}
}

@media(min-width:701px){
 .process{height:230px}.process img{height:230px;object-fit:fill}
 .house{height:290px}.house img{height:290px;object-fit:fill}
 .order{position:relative;height:160px;padding:0;background:#050505 url(stage6-order-approved.png?v=202610061425) center/1122px 160px no-repeat;border:0;display:block}
 .order h2{position:absolute;left:32px;top:22px;width:200px;height:118px;opacity:0}
 .order form{position:absolute;left:243px;top:31px;width:844px;height:91px;display:block}
 .order label,.order button,.order form>p{position:absolute;margin:0}
 .order label{font-size:0;display:block}
 .order input:not([type=file]):not(.hp),.order select,.order textarea{opacity:1;background:#202020;color:#fff;border:1px solid #777;height:30px;min-height:30px}
 .order input:focus,.order select:focus,.order textarea:focus{background:#202020;color:#fff;border:1px solid #aaa;outline:2px solid var(--red)}
 .order input[type=file]{opacity:0}
 .upload{left:0;top:0;width:125px;height:88px;min-height:88px;border:0}
 .upload strong{opacity:0}
 .order label:nth-of-type(2){left:136px;top:0;width:140px}.order label:nth-of-type(3){left:286px;top:0;width:143px}.order label:nth-of-type(4){left:442px;top:0;width:155px}
 .order label:nth-of-type(5){left:136px;top:49px;width:101px}.order label:nth-of-type(6){left:246px;top:49px;width:88px}.order label:nth-of-type(7){left:344px;top:49px;width:93px}.order label:nth-of-type(8){left:444px;top:49px;width:154px}
 .order button{left:609px;top:9px;width:235px;height:43px;min-height:43px;opacity:.01}
 .order form>p{left:609px;top:67px;width:235px;opacity:0}
}

/* Correction 2 — mobile hero integration + exact logo scale */
@media(max-width:700px){
 .hero:before{
  background:
   radial-gradient(circle at 83% 14%,rgba(238,0,20,.30),transparent 20%),
   radial-gradient(circle at 15% 70%,rgba(255,0,20,.16),transparent 24%),
   url(hero-edge-left.png) left top/18% 100% no-repeat,
   url(hero-edge-right.png) right top/18% 100% no-repeat,
   #080808;
 }
 .brand{
  width:106%;
  height:34vw;
  margin:-3px -3% -5px;
 }
 .brand img{
  width:112%;
  height:34vw;
  transform:translateX(-5.35%);
 }
}

/* Hamburger drawer — 2026-10-07 */
.nav{position:relative}
.menu{
 position:relative;
 z-index:12;
 background:transparent!important;
 border-radius:0!important;
}
.site-menu[hidden]{display:none!important}
.site-menu{
 position:absolute;
 z-index:11;
 left:0;
 top:48px;
 width:min(280px,82vw);
 padding:14px;
 display:grid;
 gap:0;
 background:rgba(5,5,5,.97);
 border:1px solid rgba(255,255,255,.22);
 box-shadow:0 12px 30px rgba(0,0,0,.75);
}
.site-menu a{
 display:block;
 padding:12px 10px;
 color:#fff;
 border-bottom:1px solid rgba(255,255,255,.14);
 text-decoration:none;
 text-transform:uppercase;
 font:600 16px/1 Oswald,sans-serif;
 letter-spacing:.12em;
 text-shadow:none;
}
.site-menu a:last-child{border-bottom:0}
.site-menu a:active,
.site-menu a:focus{color:var(--red)}

/* Cart panel — 2026-10-07 */
.cart{
 position:relative;
 z-index:12;
 background:transparent!important;
 border-radius:0!important;
}
.cart-panel[hidden]{display:none!important}
.cart-panel{
 position:absolute;
 z-index:11;
 right:0;
 top:48px;
 width:min(280px,82vw);
 padding:18px;
 background:rgba(5,5,5,.97);
 border:1px solid rgba(255,255,255,.22);
 box-shadow:0 12px 30px rgba(0,0,0,.75);
 color:#fff;
 text-align:left;
}
.cart-panel strong{
 display:block;
 margin:0 0 12px;
 text-transform:uppercase;
 font:600 20px/1 Oswald,sans-serif;
 letter-spacing:.1em;
}
.cart-panel p{
 margin:0 0 10px;
 font:400 15px/1.35 Oswald,sans-serif;
}
.cart-panel .cart-note{
 margin:0;
 color:#bbb;
 font-size:12px;
}

/* About + FAQ panels — 2026-10-07 */
.info-panel[hidden]{display:none!important}

.info-panel{
  position:fixed;
  z-index:50;
  inset:0;
  background:rgba(0,0,0,.76);
  padding:80px 20px 30px;
  overflow-y:auto;
}

.info-panel__inner{
  position:relative;
  width:min(620px,100%);
  margin:0 auto;
  padding:34px 32px;
  background:rgba(5,5,5,.97);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 18px 55px rgba(0,0,0,.85);
  color:#f2eee7;
  text-align:left;
}

.info-panel h2{
  margin:0 50px 24px 0;
  color:#fff;
  text-transform:uppercase;
  letter-spacing:.04em;
  font:600 38px/1 "Oswald",sans-serif;
}

.info-panel p{
  margin:0 0 18px;
  color:#ddd8d0;
  font:400 16px/1.55 Arial,sans-serif;
}

.info-panel__close{
  position:absolute;
  top:14px;
  right:16px;
  width:42px;
  height:42px;
  padding:0;
  border:0;
  background:transparent;
  color:#fff;
  font:300 34px/1 Arial,sans-serif;
  cursor:pointer;
}

.info-panel details{
  border-top:1px solid rgba(255,255,255,.18);
}

.info-panel details:last-of-type{
  border-bottom:1px solid rgba(255,255,255,.18);
}

.info-panel summary{
  padding:18px 4px;
  color:#fff;
  cursor:pointer;
  text-transform:uppercase;
  letter-spacing:.05em;
  font:600 16px/1.25 "Oswald",sans-serif;
}

.info-panel details p{
  padding:0 4px 18px;
  margin:0;
}

@media (max-width:700px){
  .info-panel{
    padding:68px 14px 24px;
  }

  .info-panel__inner{
    padding:28px 22px;
  }

  .info-panel h2{
    font-size:32px;
  }

  .info-panel p{
    font-size:15px;
  }
}

/* MATCHED NAV CONTROLS — 2026-10-07 */
.menu,
.cart{
  width:46px;
  height:42px;
  padding:0!important;
  display:grid;
  place-content:center;
  background:transparent!important;
  color:#f2eee7;
}

/* Hamburger */
.menu{
  gap:5px;
}

.menu span{
  visibility:visible!important;
  display:block;
  width:28px;
  height:2px;
  background:#f2eee7;
}

/* Cart */
.cart span{
  visibility:visible!important;
  display:block;
  position:relative;
  width:28px;
  height:18px;
  margin:0;
  border:2px solid #f2eee7;
  border-top:0;
  transform:skew(-8deg);
}

.cart span::after{
  visibility:visible!important;
  content:"";
  position:absolute;
  left:3px;
  right:3px;
  bottom:-7px;
  height:2px;
  border:0;
  background:
    radial-gradient(circle,#f2eee7 0 2px,transparent 2.2px)
    left center/10px 4px repeat-x;
}



/* PASS A — HEADER/NAVIGATION 2026-10-07 */

/* One visual system for both edge controls. */
.nav > .menu,
.nav > .cart{
  position:relative;
  z-index:12;
  box-sizing:border-box;
  width:46px!important;
  height:42px!important;
  min-width:46px;
  padding:0!important;
  margin:0;
  display:grid!important;
  place-content:center;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  color:#f2eee7!important;
  box-shadow:none!important;
}

/* Hamburger: exactly three bars from the HTML button. */
.nav > .menu{
  gap:5px!important;
}

.nav > .menu > span{
  visibility:visible!important;
  box-sizing:border-box;
  display:block!important;
  position:static!important;
  width:26px!important;
  height:2px!important;
  min-height:2px!important;
  margin:0!important;
  padding:0!important;
  background:#f2eee7!important;
  border:0!important;
  border-radius:0!important;
  transform:none!important;
  box-shadow:none!important;
}

.nav > .menu > span::before,
.nav > .menu > span::after{
  content:none!important;
  display:none!important;
}

/* Cart: matching 2px stroke with two discrete wheels. */
.nav > .cart > span{
  visibility:visible!important;
  box-sizing:border-box;
  display:block!important;
  position:relative!important;
  width:26px!important;
  height:17px!important;
  margin:-3px 0 0!important;
  padding:0!important;
  background:transparent!important;
  border:2px solid #f2eee7!important;
  border-top:0!important;
  border-radius:0!important;
  transform:skew(-8deg)!important;
  box-shadow:none!important;
}

.nav > .cart > span::before,
.nav > .cart > span::after{
  visibility:visible!important;
  content:""!important;
  position:absolute!important;
  top:auto!important;
  bottom:-8px!important;
  width:4px!important;
  height:4px!important;
  padding:0!important;
  background:#f2eee7!important;
  border:0!important;
  border-radius:50%!important;
  box-shadow:none!important;
}

.nav > .cart > span::before{left:3px!important}
.nav > .cart > span::after{left:auto!important;right:3px!important}

/* Drawer links and information controls share one appearance. */
.site-menu > a,
.site-menu > .site-menu__info{
  box-sizing:border-box;
  width:100%;
  min-height:0;
  display:block!important;
  margin:0!important;
  padding:12px 10px!important;
  background:transparent!important;
  border:0!important;
  border-bottom:1px solid rgba(255,255,255,.14)!important;
  border-radius:0!important;
  color:#fff!important;
  text-align:left;
  text-decoration:none;
  text-transform:uppercase;
  font:600 16px/1 Oswald,sans-serif!important;
  letter-spacing:.12em!important;
  text-shadow:none!important;
  box-shadow:none!important;
  cursor:pointer;
}

.site-menu > :last-child{
  border-bottom:0!important;
}

.site-menu > a:focus,
.site-menu > a:active,
.site-menu > .site-menu__info:focus,
.site-menu > .site-menu__info:active{
  color:var(--red)!important;
}

/* On narrow phone layout, desktop About/FAQ remain intentionally hidden:
   their equivalents now live inside the hamburger drawer. */
@media(max-width:700px){
  .nav > button[data-info-open]{
    display:none!important;
  }

  .site-menu > .site-menu__info{
    display:block!important;
  }
}


/* PASS A2 FINAL — 2026-10-07 */

/* ONE hamburger drawing only. */
.nav>.menu{
  width:46px!important;
  height:42px!important;
  padding:0!important;
  margin:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  font-size:0!important;
}

.nav>.menu::before,
.nav>.menu::after,
.nav>.menu>span::before,
.nav>.menu>span::after{
  content:none!important;
  display:none!important;
}

.nav>.menu>span{
  visibility:visible!important;
  display:block!important;
  flex:none!important;
  position:static!important;
  width:27px!important;
  height:2px!important;
  min-height:2px!important;
  margin:0!important;
  padding:0!important;
  background:#f2eee7!important;
  border:0!important;
  transform:none!important;
  box-shadow:none!important;
}

/* Matching cart weight/size. */
.nav>.cart{
  width:46px!important;
  height:42px!important;
  padding:0!important;
  margin:0!important;
  display:grid!important;
  place-items:center!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

.nav>.cart>span{
  visibility:visible!important;
  display:block!important;
  position:relative!important;
  box-sizing:border-box!important;
  width:27px!important;
  height:17px!important;
  margin:-3px 0 0!important;
  background:transparent!important;
  border:2px solid #f2eee7!important;
  border-top:0!important;
  transform:skew(-8deg)!important;
}

.nav>.cart>span::before,
.nav>.cart>span::after{
  content:""!important;
  visibility:visible!important;
  display:block!important;
  position:absolute!important;
  bottom:-8px!important;
  width:4px!important;
  height:4px!important;
  background:#f2eee7!important;
  border:0!important;
  border-radius:50%!important;
}

.nav>.cart>span::before{left:3px!important}
.nav>.cart>span::after{left:auto!important;right:3px!important}

/* Panels */
.cart-panel{
  width:min(250px,78vw)!important;
  padding:15px 16px!important;
}
.cart-panel strong{font-size:18px!important;margin-bottom:8px!important}
.cart-panel p{font-size:13px!important;margin-bottom:7px!important}
.cart-panel .cart-note{font-size:11px!important;line-height:1.35!important;margin:0!important}

.site-menu{
  max-height:calc(100svh - 70px)!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

@media(max-height:500px) and (orientation:landscape){
  .site-menu{
    top:44px!important;
    max-height:calc(100svh - 52px)!important;
    padding:8px 12px!important;
  }
  .site-menu>a,
  .site-menu>.site-menu__info{
    padding:8px 9px!important;
    font-size:13px!important;
  }
  .cart-panel{
    top:44px!important;
    width:min(250px,38vw)!important;
  }
}


/* PASS B1 HERO LAYOUT 2026-10-07 */

/* Preserve current logo and original Gerrard photograph. */
.hero .kicker,
.hero .strap,
.hero h1{
  position:relative;
  z-index:1;
}

.hero .transformation{
  position:relative;
  z-index:1;
}

.hero .after-card img{
  object-fit:cover;
  background:#dedede;
}

@media(max-width:700px){
  .hero .kicker{
    font-size:clamp(8px,1.8vw,12px);
    line-height:1.35;
    letter-spacing:.04em;
    white-space:normal;
    padding:0 7%;
  }

  .hero h1{
    font-size:clamp(28px,7.5vw,42px);
    line-height:1.02;
    white-space:normal;
    margin:5px auto;
  }

  .hero .strap{
    font-size:clamp(9px,1.9vw,13px);
    line-height:1.35;
    white-space:normal;
    letter-spacing:.035em;
    margin:7px auto 12px;
  }

  .hero .transformation{
    width:94%;
    margin:12px auto 0;
    align-items:center;
  }

  .hero .after-card img{
    object-fit:cover;
    object-position:center 43%;
  }
}

/* LIVE HERO PASS 02 — correct navigation clearance and mobile logo scale.
   Existing approved logo asset and all other sections remain unchanged. */
@media (min-width:701px){
 .hero > .brand > img{
  transform:translate(-5%,-4px) scale(1.08);
  transform-origin:center center;
 }
}
@media (max-width:700px){
 .hero > .brand > img{
  transform:translate(-5.35%,-10px) scale(1.14);
  transform-origin:center center;
 }
}

/* HERO PASS 04 — mobile AFTER garment: show entire existing approved shirt.
   Keep the desktop layout and original garment asset unchanged. */
@media (max-width:700px){
  .hero .after-card img{
    object-fit:contain;
    object-position:center center;
    background:#dedede;
    transform:none;
  }
}

/* Approved 2026-10-08 photo-to-merch composition ONLY.
   The top logo, navigation, process, shop and order form stay as HTML. */
.hero .transformation.approved-pair{
  display:block;
  width:100%;
  max-width:100%;
  margin:8px auto 0;
  padding:0;
  line-height:0;
}
.hero .transformation.approved-pair .approved-pair-image{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  object-fit:contain;
  background:#070707;
  border:0;
  box-shadow:none;
}
@media (max-width:700px){
  .hero .transformation.approved-pair{
    display:block;
    width:100%;
    margin:8px auto 0;
  }
}

/* HERO PASS 06 — tighten only the approved transformation section and desktop edge rails.
   Artwork itself is unchanged; only unused vertical whitespace was cropped from its container asset. */
@media (min-width:701px){
  .hero:before{
    background-size:auto,auto,88px 100%,140px 100%,3.5% 100%,3.5% 100% !important;
  }
  .hero .transformation.approved-pair{
    margin:0 auto;
  }
}

/* ORDER PASS 01 — align the working desktop form controls to the approved strip.
   Background artwork, upload target, submit button and all mobile geometry stay unchanged. */
@media (min-width:701px){
  .order label:nth-of-type(2){top:5px}
  .order label:nth-of-type(3){top:5px}
  .order label:nth-of-type(4){top:5px}
  .order label:nth-of-type(5){top:58px}
  .order label:nth-of-type(6){top:58px}
  .order label:nth-of-type(7){top:58px}
  .order label:nth-of-type(8){top:58px}
  .order input:not([type=file]):not(.hp),
  .order select,
  .order textarea{
    height:29px;
    min-height:29px;
    padding:0 6px;
    border-radius:2px;
    font-size:12px;
  }
}