:root{--black:#080808;--paper:#eee8dc;--cardboard:#b88350;--orange:#d89b35;--white:#f5f1e9}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--black);color:var(--white);font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}button,input,textarea{font:inherit}.hero{height:min(42vw,500px);min-height:390px;position:relative;overflow:hidden}.hero-reference{position:absolute;inset:0;background:url('assets/images/site/hero-hq.png') center/cover no-repeat}.scroll-cue{position:absolute;left:50%;bottom:17px;transform:translateX(-50%);font-size:10px;letter-spacing:3px;text-align:center;color:#ddd}.scroll-cue span{font-size:17px}.work{padding:24px 20px 34px;max-width:1500px;margin:auto}.work-heading{display:flex;align-items:flex-start;gap:28px;margin-bottom:16px}.work h1{font-family:Impact,'Arial Black',sans-serif;font-size:clamp(50px,6vw,88px);line-height:.9;margin:0}.sound-note{font-family:'Marker Felt','Comic Sans MS',cursive;font-size:18px;transform:rotate(-2deg)}.sound-note em{font-style:normal;color:var(--orange)}.gallery{columns:5 190px;column-gap:12px}.card{display:block;width:100%;margin:0 0 12px;border:0;padding:0;border-radius:7px;overflow:hidden;background:#151515;cursor:pointer;break-inside:avoid;position:relative}.card img{display:block;width:100%;aspect-ratio:9/13;object-fit:cover;transition:.3s}.card:nth-child(3n) img{aspect-ratio:9/11}.card:hover img{transform:scale(1.025);filter:brightness(1.06)}.card-label{position:absolute;inset:auto 0 0;padding:35px 10px 10px;background:linear-gradient(transparent,rgba(0,0,0,.8));font-size:11px;font-weight:800;opacity:0;transition:.2s}.card:hover .card-label{opacity:1}
.viewer{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.94);display:none;align-items:center;justify-content:center;padding:40px 90px}.viewer.open{display:flex}.viewer-inner{width:min(580px,70vw);max-height:92vh}.viewer-media{height:min(76vh,820px);aspect-ratio:9/14;margin:auto;background:#111;border-radius:10px;overflow:hidden}.viewer-media img,.viewer-media video{width:100%;height:100%;object-fit:cover;display:block}.viewer-media video{display:none}.viewer-meta{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:13px 2px}.viewer-meta h2{font-size:18px;margin:0 0 5px}.viewer-meta p{font-size:10px;letter-spacing:1px;color:#bbb;margin:0}.sound-control{border:1px solid #444;background:#111;color:#fff;border-radius:99px;padding:10px 14px;font-size:11px;cursor:pointer;white-space:nowrap}.viewer-close{position:absolute;right:25px;top:20px;border:0;background:none;color:#fff;font-size:38px;cursor:pointer}.nav{position:absolute;top:50%;transform:translateY(-50%);border:1px solid #444;background:rgba(20,20,20,.8);color:#fff;border-radius:50%;width:52px;height:52px;font-size:38px;line-height:40px;cursor:pointer}.prev{left:28px}.next{right:28px}
.how{position:relative;background:var(--paper);color:#0b0b0b;padding:55px 5vw 35px;border-top:14px solid var(--cardboard);border-bottom:14px solid var(--cardboard);background-image:linear-gradient(rgba(255,255,255,.18),rgba(255,255,255,.18))}.tape-title{position:absolute;top:-7px;left:50%;transform:translate(-50%,-50%) rotate(-1deg);background:#c9a06d;padding:10px 26px;font-family:'Marker Felt','Comic Sans MS',cursive;font-weight:900;font-size:25px}.how-grid{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:22px;max-width:1250px;margin:auto}.step{text-align:center;position:relative}.step b{position:absolute;left:5%;top:0;border:2px solid #111;border-radius:50%;width:44px;height:44px;display:grid;place-items:center;font-family:'Marker Felt','Comic Sans MS',cursive;font-size:20px;transform:rotate(-8deg)}.asset-box{height:170px;display:grid;place-items:center}.asset-box img{max-width:230px;max-height:155px;object-fit:contain}.asset-box.camera img{max-width:245px;mix-blend-mode:multiply;border-radius:3px}.step h2{font-family:Impact,'Arial Black',sans-serif;font-size:31px;margin:0 0 4px}.step p{font-size:12px;letter-spacing:1.2px;margin:0;line-height:1.35}.arrow{font-family:'Marker Felt','Comic Sans MS',cursive;font-size:48px}.phone{height:170px;width:92px;margin:auto;border:7px solid #111;border-radius:18px;overflow:hidden;background:#111;position:relative}.phone:before{content:'';position:absolute;z-index:3;top:0;left:50%;transform:translateX(-50%);width:42px;height:8px;background:#111;border-radius:0 0 8px 8px}.phone video,.phone img{width:100%;height:100%;object-fit:cover}.phone video{display:none}
.brands{background:var(--cardboard);color:#111;display:grid;grid-template-columns:auto 1fr;gap:50px;align-items:center;padding:28px 5vw;border-top:1px solid rgba(0,0,0,.25);border-bottom:1px solid rgba(0,0,0,.35)}.brands h2{font-family:Impact,'Arial Black',sans-serif;font-size:36px;margin:0;white-space:nowrap}.logo-grid{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:25px 42px;min-height:55px}.brand-logo{max-width:125px;max-height:42px;object-fit:contain;filter:grayscale(1) contrast(1.2)}.brand-text{font-weight:900;font-size:20px;color:#111}
.cta{position:relative;min-height:390px;display:grid;grid-template-columns:1.08fr .92fr;align-items:center;overflow:hidden;background:#080808}.cta-art{position:absolute;inset:0;background:url('assets/images/site/cta.jpg') center/cover no-repeat}.cta:before{content:'';position:absolute;z-index:1;top:0;right:0;bottom:0;width:53%;background:linear-gradient(90deg,rgba(8,8,8,.78) 0%,rgba(8,8,8,.97) 18%,#080808 100%)}.cta-form-wrap{position:relative;z-index:2;grid-column:2;padding:42px 7vw 42px 34px;max-width:650px;width:100%}.cta-note{font-family:'Marker Felt','Comic Sans MS',cursive;font-size:18px;line-height:1.35;margin-bottom:18px}.cta form{display:grid;gap:8px}.cta input,.cta textarea{width:100%;background:#0b0b0b;border:1px solid #333;border-radius:4px;color:#fff;padding:12px;font-size:10px;letter-spacing:1px}.cta textarea{height:68px;resize:vertical}.cta button{width:100%;border:0;border-radius:4px;background:#eee6d9;color:#111;font-weight:900;padding:14px;cursor:pointer}
.customize-toggle{position:fixed;right:16px;bottom:16px;z-index:800;border:1px solid #555;background:#111;color:#fff;border-radius:99px;padding:10px 14px;font-size:10px;letter-spacing:1px;cursor:pointer}.customizer{position:fixed;right:16px;bottom:60px;z-index:900;width:300px;background:#111;border:1px solid #333;border-radius:12px;padding:18px;display:none;box-shadow:0 20px 50px #000}.customizer.open{display:block}.customizer h3{margin:0 0 15px}.customizer label{display:block;font-size:11px;letter-spacing:.7px;margin:12px 0}.customizer input{display:block;width:100%;margin-top:6px;font-size:11px}.customizer small{display:block;color:#999;line-height:1.4}.customizer>button{position:absolute;right:10px;top:8px;background:none;border:0;color:#fff;font-size:22px}
@media(max-width:800px){.hero{height:58svh;min-height:470px}.hero-reference{background-position:center;background-size:cover}.work{padding:24px 12px}.work-heading{justify-content:space-between;gap:8px}.work h1{font-size:clamp(44px,13vw,68px);max-width:68%}.sound-note{font-size:12px}.gallery{columns:2;column-gap:8px}.card{margin-bottom:8px}.viewer{padding:20px 12px 75px;align-items:center}.viewer-inner{width:100%;max-width:460px}.viewer-media{height:min(72svh,700px);max-width:100%;aspect-ratio:9/14}.viewer-meta{padding:12px 4px}.nav{top:auto;bottom:18px;width:44px;height:44px}.prev{left:calc(50% - 62px)}.next{right:calc(50% - 62px)}.viewer-close{right:14px;top:10px;z-index:2}.how{padding:55px 22px 35px}.how-grid{display:block}.step{padding:10px 0 30px}.step b{left:5px;top:10px}.arrow{text-align:center;transform:rotate(90deg);height:34px;line-height:25px}.asset-box{height:155px}.phone{height:180px;width:98px}.brands{display:block;padding:30px 24px}.brands h2{text-align:center;font-size:34px;margin-bottom:28px}.logo-grid{gap:24px 30px}.brand-logo{max-width:110px}.cta{min-height:720px;display:block;background:#080808}.cta-art{background-position:24% top;background-size:auto 390px;background-repeat:no-repeat}.cta:before{top:330px;left:0;right:0;bottom:0;width:auto;background:linear-gradient(transparent 0,#080808 18%,#080808 100%)}.cta-form-wrap{position:absolute;z-index:3;left:7vw;right:7vw;bottom:34px;padding:0;max-width:none;width:auto}.cta-note{font-size:16px}.customize-toggle{font-size:9px}}
\n/* V5 QA cleanup */
.sound-note{position:relative;padding-right:48px;margin-top:8px}
.sound-note span{display:none}
.sound-note:after{content:'↘';position:absolute;right:8px;bottom:-22px;font-family:'Marker Felt','Comic Sans MS',cursive;font-size:34px;transform:rotate(10deg);color:var(--white)}
.asset-box img[src$="how-box-clean.png"]{max-width:245px;max-height:165px}
.brands{min-height:125px}
.brand-logo{filter:none;max-width:150px;max-height:48px;width:auto;height:auto}
.cta:before{background:#080808;width:54%;}
.cta-form-wrap{background:#080808;padding-top:42px;padding-bottom:42px}
@media(max-width:800px){
 .sound-note{padding-right:26px;margin-top:2px}
 .sound-note:after{right:0;bottom:-18px;font-size:25px}
 .cta:before{top:330px;left:0;right:0;bottom:0;width:auto;background:linear-gradient(transparent 0,#080808 14%,#080808 100%)}
 .cta-form-wrap{background:#080808;padding:12px 0 0}
 .brand-logo{max-width:125px;max-height:42px}
}

/* V6 layout polish */
.work{max-width:none;width:100%;padding-left:18px;padding-right:18px}
.work-heading{align-items:center;justify-content:flex-start;gap:42px}
.sound-callout{display:flex;align-items:center;gap:18px;margin-top:0;flex:0 0 auto}
.sound-note{padding:0;margin:0;position:relative;line-height:1.05}
.sound-note:after{display:none!important}
.sound-note .sound-arrow{display:inline-block!important;color:var(--white);font-family:'Marker Felt','Comic Sans MS',cursive;font-size:30px;margin-left:8px;transform:rotate(8deg) translateY(5px)}
.sound-badge{width:44px;height:44px;border:1.5px solid #777;border-radius:50%;display:grid;place-items:center;font-size:20px;background:#101010;box-shadow:0 0 0 3px rgba(255,255,255,.025)}
.gallery{columns:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;width:100%}
.card{margin:0;min-width:0}
.card img,.card:nth-child(3n) img{aspect-ratio:9/13;object-fit:cover}
.asset-box img[src$="how-box-transparent.png"]{max-width:245px;max-height:165px;filter:drop-shadow(0 12px 10px rgba(0,0,0,.12))}
.logo-grid{display:grid;grid-template-columns:repeat(5,minmax(110px,1fr));gap:24px 34px;width:100%;align-items:center;justify-items:center}
.brand-logo{width:100%;height:48px;max-width:145px;max-height:48px;object-fit:contain;filter:none}
.cta{min-height:390px;background:#080808}
.cta-art{background-image:url('assets/images/site/cta-hq.png');background-position:center;background-size:cover;background-repeat:no-repeat}
.cta:before{display:none}
.cta-form-wrap{background:#080808;box-shadow:-45px 0 60px 30px #080808;padding-top:42px;padding-bottom:42px}
@media(max-width:1000px){.gallery{grid-template-columns:repeat(3,minmax(0,1fr))}.logo-grid{grid-template-columns:repeat(4,minmax(90px,1fr))}.sound-callout{gap:10px}.sound-note{font-size:15px}}
@media(max-width:800px){
 .work-heading{align-items:flex-end;justify-content:space-between;gap:12px}.work h1{max-width:64%}.sound-callout{gap:7px;margin-bottom:7px}.sound-note{font-size:11px}.sound-note .sound-arrow{font-size:20px;margin-left:3px}.sound-badge{width:34px;height:34px;font-size:15px}
 .gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.card{margin:0}
 .logo-grid{grid-template-columns:repeat(2,minmax(100px,1fr));gap:22px 28px}.brand-logo{height:42px;max-width:135px}
 .cta-art{background-position:27% top;background-size:auto 390px}.cta-form-wrap{box-shadow:0 -45px 55px 25px #080808}
}

/* V7 local video assets */
.card video{width:100%;height:100%;object-fit:cover;display:none}

/* V9 — intentional mobile composition */
@media(max-width:800px){
  body{background:#080808}
  .hero{height:92svh;min-height:650px;max-height:860px;background:#080808}
  .hero-reference{background-image:url('assets/images/site/hero-hq.png');background-size:auto 100%;background-position:center center;background-repeat:no-repeat}
  .work{padding:34px 12px 42px}
  .work-heading{display:block;margin-bottom:20px}
  .work h1{font-size:clamp(58px,16vw,82px);line-height:.84;max-width:100%;margin-bottom:18px}
  .sound-callout{justify-content:flex-start;gap:12px;margin:0}
  .sound-note{font-size:15px;line-height:1.08}.sound-note .sound-arrow{font-size:25px}.sound-badge{width:42px;height:42px;font-size:18px}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .card{border-radius:5px}.card img,.card:nth-child(3n) img,.card video{aspect-ratio:9/14}.card-label{display:none}
  .viewer{padding:52px 10px 82px}.viewer-inner{max-width:430px}.viewer-media{height:min(68svh,680px);border-radius:8px}.viewer-meta{align-items:flex-start}.viewer-meta h2{font-size:16px}.sound-control{padding:9px 12px}
  .how{padding:64px 20px 42px;border-top-width:10px;border-bottom-width:10px}.tape-title{font-size:22px;padding:9px 20px}.how-grid{display:block}.step{padding:10px 0 26px}.step b{position:static;margin:0 auto 6px;width:42px;height:42px}.asset-box{height:170px}.asset-box img{max-height:158px;max-width:245px}.asset-box.camera img{max-width:255px}.step h2{font-size:38px}.step p{font-size:12px;max-width:310px;margin:auto}.arrow{height:45px;line-height:34px;transform:rotate(90deg);font-size:44px}.phone{height:205px;width:111px}
  .brands{padding:34px 20px 38px}.brands h2{text-align:left;font-size:42px;line-height:.95;margin-bottom:30px}.logo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 25px}.brand-logo{height:44px;max-width:140px}
  .cta{min-height:860px;display:block;position:relative;background:#080808}.cta-art{height:470px;bottom:auto;background-size:auto 470px;background-position:24% top;background-repeat:no-repeat}.cta-form-wrap{position:absolute;left:0;right:0;bottom:0;width:100%;max-width:none;padding:80px 20px 30px;background:linear-gradient(transparent 0,#080808 28%,#080808 100%);box-shadow:none}.cta-note{font-size:19px;max-width:340px;margin-bottom:18px}.cta input,.cta textarea{font-size:12px;padding:14px}.cta textarea{height:86px}.cta button{padding:16px}.customize-toggle{right:10px;bottom:10px;opacity:.75}
}
@media(max-width:430px){
 .hero{height:82svh;min-height:590px}.hero-reference{background-size:auto 100%;background-position:center}
 .work h1{font-size:15.5vw}.sound-note{font-size:14px}
 .brands h2{font-size:38px}.brand-logo{max-width:125px;height:40px}
 .cta{min-height:820px}.cta-art{height:430px;background-size:auto 430px;background-position:23% top}.cta-form-wrap{padding-left:16px;padding-right:16px}
}

/* V10 — cardboard brand wall */
.brands{
  position:relative;
  background-color:#b9824d;
  background-image:
    linear-gradient(90deg,transparent 0 24%,rgba(65,36,15,.13) 24.1%,transparent 24.4%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,rgba(0,0,0,.018) 1px 3px),
    radial-gradient(ellipse at 18% 32%,rgba(255,255,255,.09),transparent 34%),
    radial-gradient(ellipse at 77% 70%,rgba(70,35,12,.08),transparent 38%);
  color:#111;
  grid-template-columns:minmax(285px,.72fr) 2.28fr;
  gap:0;
  padding:0;
  min-height:180px;
  border-top:2px solid rgba(55,28,10,.55);
  border-bottom:4px solid #080808;
  box-shadow:inset 0 9px 18px rgba(255,255,255,.05),inset 0 -8px 18px rgba(50,25,8,.12);
  overflow:hidden;
}
.brands:before,.brands:after{content:'';position:absolute;left:0;right:0;height:9px;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(38,20,8,.34),rgba(255,255,255,.11) 35%,transparent 70%);opacity:.7}.brands:before{top:0}.brands:after{bottom:0;transform:rotate(180deg)}
.brands h2{
  align-self:stretch;
  display:flex;
  align-items:center;
  padding:34px 42px 34px 5vw;
  margin:0;
  font-family:Impact,'Arial Black',sans-serif;
  font-size:clamp(34px,3vw,52px);
  line-height:.94;
  letter-spacing:-.5px;
  white-space:normal;
  background:rgba(95,52,22,.13);
  border-right:2px dashed rgba(57,29,11,.42);
  text-shadow:0 1px rgba(255,255,255,.08);
  position:relative;
}
.brands h2:after{content:'HANDLE WITH CARE';position:absolute;left:5vw;bottom:17px;font:700 8px/1 Arial,sans-serif;letter-spacing:2.3px;opacity:.38}
.logo-grid{padding:32px 4.5vw;grid-template-columns:repeat(5,minmax(105px,1fr));gap:28px 34px;min-height:180px}
.brand-logo{height:48px;max-width:150px;filter:brightness(0) saturate(100%);opacity:.95}
@media(max-width:1000px) and (min-width:801px){.brands{grid-template-columns:minmax(250px,.72fr) 2.28fr}.logo-grid{grid-template-columns:repeat(4,minmax(95px,1fr));gap:25px}.brands h2{padding-left:4vw}}
@media(max-width:800px){
 .brands{display:block;padding:0;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,rgba(0,0,0,.018) 1px 3px),radial-gradient(ellipse at 18% 20%,rgba(255,255,255,.09),transparent 35%),radial-gradient(ellipse at 78% 76%,rgba(70,35,12,.08),transparent 40%)}
 .brands h2{min-height:108px;justify-content:center;text-align:center;padding:28px 24px 36px;font-size:42px;border-right:0;border-bottom:2px dashed rgba(57,29,11,.42);background:rgba(95,52,22,.14)}
 .brands h2:after{left:50%;transform:translateX(-50%);bottom:16px;white-space:nowrap}
 .logo-grid{padding:32px 24px 38px;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 24px;min-height:0}
 .brand-logo{height:43px;max-width:138px}
}

/* V11 — mobile cinematic reframing + literal box brand band */
.brands{border-top:0;background-color:#b9824d;background-image:linear-gradient(90deg,transparent 0 31%,rgba(58,31,13,.22) 31.08%,rgba(255,255,255,.07) 31.22%,transparent 31.38%,transparent 65%,rgba(58,31,13,.14) 65.08%,rgba(255,255,255,.05) 65.2%,transparent 65.35%),repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,rgba(0,0,0,.022) 1px 3px),radial-gradient(ellipse at 18% 32%,rgba(255,255,255,.10),transparent 34%),radial-gradient(ellipse at 77% 70%,rgba(70,35,12,.09),transparent 38%);box-shadow:inset 0 12px 18px rgba(255,255,255,.045),inset 0 -10px 18px rgba(50,25,8,.15)}
.brands h2{margin:30px 20px 30px 4vw;padding:17px 21px;min-height:0;align-self:center;justify-self:start;border:4px solid #a32118;border-radius:3px;background:transparent;color:#a32118;font-family:Impact,'Arial Black',sans-serif;font-size:clamp(28px,2.7vw,44px);line-height:.9;letter-spacing:1px;transform:rotate(-2deg);text-transform:uppercase;box-shadow:inset 0 0 0 2px rgba(163,33,24,.22);text-shadow:none;position:relative;opacity:.92}
.brands h2:before{content:'';position:absolute;inset:5px;border:1.5px solid #a32118;opacity:.75;pointer-events:none}.brands h2:after{display:none}.logo-grid{padding-top:28px;padding-bottom:28px}
@media(max-width:800px){
 .hero{height:66svh;min-height:500px;max-height:690px;background:#080808}
 .hero-reference{background-size:cover;background-position:center 48%;}
 .brands{background-image:linear-gradient(90deg,transparent 0 49.7%,rgba(58,31,13,.16) 49.9%,rgba(255,255,255,.05) 50.1%,transparent 50.3%),repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,rgba(0,0,0,.022) 1px 3px),radial-gradient(ellipse at 18% 20%,rgba(255,255,255,.09),transparent 35%),radial-gradient(ellipse at 78% 76%,rgba(70,35,12,.08),transparent 40%)}
 .brands h2{width:max-content;max-width:calc(100% - 40px);margin:26px auto 10px;padding:15px 18px;font-size:35px;border-bottom:4px solid #a32118;background:transparent;min-height:0;text-align:center;display:block}
 .logo-grid{padding-top:28px}
 .cta{min-height:800px}
 .cta-art{height:430px;background-size:cover;background-position:31% center}
 .cta-form-wrap{padding-top:58px}
}
@media(max-width:430px){
 .hero{height:62svh;min-height:470px;max-height:610px}
 .hero-reference{background-size:cover;background-position:center 48%}
 .cta{min-height:780px}.cta-art{height:410px;background-size:cover;background-position:30% center}
}

/* V12 — match approved wireframe more literally */
/* The cream How It Works sheet sits on a continuous corrugated carton. */
.how{
  border:0;
  padding:55px max(6vw,70px) 34px;
  background-color:#b9824d;
  background-image:
    repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,rgba(45,22,7,.025) 1px 3px),
    radial-gradient(ellipse at 18% 25%,rgba(255,255,255,.08),transparent 36%),
    radial-gradient(ellipse at 82% 70%,rgba(64,31,9,.08),transparent 40%);
}
.how:after{
  content:'';position:absolute;inset:22px 2.1vw 16px;z-index:0;
  background:#eee8dc;
  background-image:linear-gradient(rgba(255,255,255,.20),rgba(255,255,255,.20));
  box-shadow:0 2px 7px rgba(55,31,15,.16);
}
.how-grid,.tape-title{position:relative;z-index:1}.tape-title{top:16px}

/* Literal box band beneath the paper — no decorative web-card treatment. */
.brands{
  position:relative;display:grid;grid-template-columns:minmax(300px,.82fr) 2.18fr;
  gap:0;padding:0;min-height:150px;overflow:hidden;
  background-color:#b9824d;
  background-image:
    linear-gradient(90deg,transparent 0 31.8%,rgba(58,31,13,.23) 31.9%,rgba(255,255,255,.07) 32.05%,transparent 32.2%,transparent 66%,rgba(58,31,13,.14) 66.08%,rgba(255,255,255,.05) 66.2%,transparent 66.35%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,rgba(0,0,0,.022) 1px 3px),
    radial-gradient(ellipse at 18% 32%,rgba(255,255,255,.10),transparent 34%),
    radial-gradient(ellipse at 77% 70%,rgba(70,35,12,.09),transparent 38%);
  box-shadow:inset 0 10px 14px rgba(255,255,255,.04),inset 0 -10px 18px rgba(50,25,8,.15);
  border:0;
}
.brands:before{top:0;height:3px;opacity:.38}.brands:after{bottom:0;height:5px;opacity:.55}
/* worn, one-line ink stamp — intentionally imperfect rather than a graphic badge */
.brands h2{
  width:max-content;max-width:calc(100% - 42px);min-height:0;margin:auto 24px auto 4vw;padding:5px 7px;
  display:block;white-space:nowrap;border:0;border-radius:0;background:transparent;box-shadow:none;
  color:#9d281f;font-family:Impact,'Arial Black',sans-serif;font-size:clamp(27px,2.55vw,40px);line-height:1;
  letter-spacing:.6px;transform:rotate(-1.2deg);opacity:.86;
  text-shadow:1px 0 rgba(126,31,24,.22),-1px 1px rgba(126,31,24,.16);
  filter:contrast(.92);
  -webkit-mask-image:repeating-radial-gradient(circle at 20% 35%,#000 0 1.5px,rgba(0,0,0,.82) 2px 3px,#000 4px 8px);
  mask-image:repeating-radial-gradient(circle at 20% 35%,#000 0 1.5px,rgba(0,0,0,.82) 2px 3px,#000 4px 8px);
}
.brands h2:before,.brands h2:after{display:none!important}
.logo-grid{padding:28px 4vw;grid-template-columns:repeat(5,minmax(105px,1fr));gap:22px 34px;min-height:150px}
.brand-logo{height:44px;max-width:145px;filter:brightness(0) saturate(100%);opacity:.94}

@media(max-width:800px){
  /* Show the WHOLE cinematic scene rather than zooming into the carton. */
  .hero{height:auto;min-height:0;aspect-ratio:16/9;background:#080808}
  .hero-reference{background-image:url('assets/images/site/hero-hq.png');background-size:100% auto;background-position:center center;background-repeat:no-repeat}
  .how{padding:54px 20px 30px}.how:after{inset:18px 12px 14px}.tape-title{top:13px}
  .brands{display:block;min-height:0;background-image:linear-gradient(90deg,transparent 0 49.7%,rgba(58,31,13,.16) 49.9%,rgba(255,255,255,.05) 50.1%,transparent 50.3%),repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,rgba(0,0,0,.022) 1px 3px),radial-gradient(ellipse at 18% 20%,rgba(255,255,255,.09),transparent 35%),radial-gradient(ellipse at 78% 76%,rgba(70,35,12,.08),transparent 40%)}
  .brands h2{width:max-content;max-width:calc(100% - 32px);margin:24px auto 8px;padding:4px 5px;font-size:clamp(25px,8vw,34px);white-space:nowrap;text-align:center}
  .logo-grid{padding:25px 22px 34px;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px;min-height:0}
  .brand-logo{height:42px;max-width:135px}
}

/* V13 — faithful approved-wireframe reconstruction */
@media (min-width:801px){
  .how{margin:0;background:#b9824d;padding:38px 2.2vw 0;border:0;position:relative;box-shadow:inset 0 7px 12px rgba(45,23,8,.22);background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,rgba(0,0,0,.025) 1px 3px),linear-gradient(90deg,rgba(55,29,12,.18) 0 2px,transparent 2px 33.33%,rgba(55,29,12,.17) 33.33% 33.46%,transparent 33.46% 66.66%,rgba(55,29,12,.14) 66.66% 66.79%,transparent 66.79%)}
  .how:after{content:'';position:absolute;z-index:0;left:1.5vw;right:1.5vw;top:27px;bottom:0;background:#eee8dc;clip-path:polygon(.4% 2%,7% .5%,14% 1.6%,22% .4%,31% 1.5%,39% .2%,48% 1.2%,58% .3%,68% 1.4%,78% .2%,88% 1.1%,99.5% .3%,99.2% 97.8%,91% 99%,81% 98.2%,72% 99.3%,62% 98.5%,52% 99.4%,42% 98.3%,32% 99.1%,21% 98.4%,11% 99.2%,.6% 98%);box-shadow:0 2px 8px rgba(0,0,0,.12)}
  .tape-title{top:13px;background:#c9a06d;padding:8px 24px;font-size:24px;transform:translate(-50%,-50%) rotate(-1.5deg);box-shadow:0 2px 4px rgba(0,0,0,.12)}
  .how-grid{position:relative;z-index:1;min-height:270px;padding:25px 3vw 20px;grid-template-columns:1fr 60px 1fr 60px 1fr;gap:10px;max-width:1350px}
  .step b{left:2%;top:8px}.asset-box{height:145px}.asset-box img{max-height:135px;max-width:210px}.asset-box.camera img{max-width:220px}.phone{height:145px;width:79px}.step h2{font-size:29px}.step p{font-size:11px}.arrow{font-size:42px}
  .brands{margin:0;min-height:118px;padding:0 2.8vw;display:grid;grid-template-columns:280px 1fr;gap:22px;align-items:center;background:#b9824d;border:0;box-shadow:inset 0 -7px 12px rgba(49,25,8,.17);background-image:linear-gradient(90deg,transparent 0 28.8%,rgba(62,32,13,.22) 28.9%,rgba(255,255,255,.05) 29.05%,transparent 29.2%,transparent 64.8%,rgba(62,32,13,.16) 64.9%,rgba(255,255,255,.04) 65.05%,transparent 65.2%),repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,rgba(0,0,0,.025) 1px 3px)}
  .brands h2{display:block!important;width:max-content;max-width:270px;margin:0;padding:0!important;border:0!important;background:none!important;color:#a5261b!important;font-family:Impact,'Arial Black',sans-serif;font-size:31px!important;line-height:1!important;letter-spacing:.2px;white-space:nowrap;transform:rotate(-1.1deg)!important;opacity:.77!important;filter:blur(.15px);text-shadow:1px 0 rgba(110,25,17,.18),-1px 1px rgba(110,25,17,.12);box-shadow:none!important}
  .brands h2:before,.brands h2:after{display:none!important}
  .logo-grid{padding:17px 0!important;display:grid;grid-template-columns:repeat(5,minmax(100px,1fr));gap:17px 30px;min-height:0!important;align-items:center;justify-items:center}
  .brand-logo{height:37px!important;max-width:128px!important;filter:brightness(0) saturate(100%)!important;opacity:.94}
}

/* Mobile: preserve the cinematic wide establishing shot instead of cropping into the box */
@media (max-width:800px){
  .hero{height:auto!important;min-height:0!important;max-height:none!important;aspect-ratio:16/9;background:#080808}
  .hero-reference{background-image:url('assets/images/site/hero-hq.png')!important;background-size:contain!important;background-position:center center!important;background-repeat:no-repeat!important}
}

/* V14 — strict reconstruction of the APPROVED wireframe package section. */
@media (min-width:801px){
  .package-section{
    position:relative;
    background:#b98450;
    background-image:
      linear-gradient(90deg,transparent 0 31.8%,rgba(73,39,17,.22) 31.86%,rgba(255,255,255,.08) 31.98%,transparent 32.12%,transparent 67.2%,rgba(73,39,17,.18) 67.28%,rgba(255,255,255,.06) 67.38%,transparent 67.5%),
      repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,rgba(40,20,8,.025) 1px 3px);
    box-shadow:inset 0 8px 14px rgba(54,28,10,.18),inset 0 -7px 10px rgba(54,28,10,.2);
    padding:18px 0 0;
  }
  .package-section:before{content:'';position:absolute;left:0;right:0;top:0;height:18px;background:linear-gradient(#9c6738,#c28a55 35%,#a86f3d 70%,#6f4325);opacity:.85}
  .how{
    position:relative!important;
    margin:0 1.55vw!important;
    padding:32px 3.5vw 20px!important;
    height:330px!important;
    min-height:0!important;
    border:0!important;
    background:#eee9df!important;
    background-image:radial-gradient(ellipse at 20% 30%,rgba(255,255,255,.35),transparent 42%),repeating-linear-gradient(90deg,rgba(80,60,40,.018) 0 1px,transparent 1px 5px)!important;
    clip-path:polygon(.4% 2.2%,8% .6%,16% 1.8%,25% .4%,34% 1.5%,43% .5%,52% 1.6%,62% .4%,72% 1.4%,82% .5%,91% 1.5%,99.6% .6%,99.3% 98%,91% 99.1%,82% 98.3%,72% 99.2%,62% 98.4%,52% 99.3%,42% 98.4%,32% 99.1%,22% 98.2%,12% 99.1%,.5% 98%)!important;
    box-shadow:0 2px 8px rgba(0,0,0,.12)!important;
  }
  .how:after{display:none!important}
  .tape-title{
    position:absolute!important;z-index:5!important;left:50%!important;top:17px!important;
    width:auto!important;min-width:210px!important;
    padding:8px 24px!important;margin:0!important;
    background:#c79a62!important;color:#111!important;
    font-size:22px!important;line-height:1!important;text-align:center!important;
    transform:translate(-50%,-50%) rotate(-2deg)!important;
    box-shadow:0 2px 5px rgba(0,0,0,.15)!important;
  }
  .tape-title:before,.tape-title:after{content:'';position:absolute;top:-4px;bottom:-4px;width:24px;background:rgba(212,180,132,.58)}
  .tape-title:before{left:-14px;transform:rotate(4deg)}.tape-title:after{right:-14px;transform:rotate(-3deg)}
  .how-grid{
    height:100%!important;min-height:0!important;max-width:1450px!important;margin:0 auto!important;
    padding:16px 2.4vw 0!important;
    display:grid!important;grid-template-columns:1fr 58px 1fr 58px 1fr!important;
    gap:12px!important;align-items:center!important;
  }
  .step{height:245px!important;display:flex!important;flex-direction:column!important;justify-content:flex-end!important;align-items:center!important;padding:0!important}
  .step b{position:absolute!important;left:7%!important;top:18px!important;width:42px!important;height:42px!important;font-size:19px!important}
  .asset-box{height:142px!important;width:100%!important;display:grid!important;place-items:center!important}
  .asset-box img{max-width:190px!important;max-height:132px!important;object-fit:contain!important}
  .asset-box.camera img{max-width:205px!important;max-height:140px!important;mix-blend-mode:multiply!important;background:transparent!important}
  .phone{height:146px!important;width:79px!important;margin:0 auto!important;border-width:6px!important;border-radius:17px!important}
  .step h2{font-size:29px!important;line-height:.95!important;margin:3px 0 5px!important}
  .step p{font-size:11px!important;letter-spacing:1.1px!important;line-height:1.32!important}
  .arrow{font-size:38px!important;align-self:center!important;margin-top:4px!important}

  .brands{
    height:142px!important;min-height:0!important;margin:0!important;padding:0 3.1vw!important;
    display:grid!important;grid-template-columns:300px 1fr!important;gap:24px!important;align-items:center!important;
    background:transparent!important;border:0!important;box-shadow:none!important;
  }
  .brands:before,.brands:after{display:none!important}
  .brands h2{
    display:block!important;width:auto!important;max-width:none!important;margin:0!important;padding:0!important;
    color:#a5291e!important;background:none!important;border:0!important;box-shadow:none!important;
    font-family:Impact,'Arial Black',sans-serif!important;font-size:29px!important;line-height:1!important;letter-spacing:.1px!important;
    white-space:nowrap!important;transform:rotate(-.8deg)!important;opacity:.72!important;
    filter:blur(.25px)!important;text-shadow:1px 0 rgba(120,30,20,.16),0 1px rgba(120,30,20,.10)!important;
  }
  .brands h2:before,.brands h2:after{display:none!important}
  .logo-grid{
    padding:0!important;margin:0!important;min-height:0!important;
    display:grid!important;grid-template-columns:repeat(5,minmax(92px,1fr))!important;
    grid-auto-rows:44px!important;gap:8px 28px!important;align-items:center!important;justify-items:center!important;
  }
  .brand-logo{width:auto!important;height:auto!important;max-width:126px!important;max-height:34px!important;object-fit:contain!important;filter:brightness(0) saturate(100%)!important;opacity:.95!important}
}

/* V14 mobile: same wide establishing composition, deliberately smaller than the viewport width. */
@media (max-width:800px){
  .hero{aspect-ratio:auto!important;height:43svh!important;min-height:300px!important;background:#080808!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important}
  .hero-reference{position:relative!important;inset:auto!important;width:100%!important;height:100%!important;background-size:92% auto!important;background-position:center center!important;background-repeat:no-repeat!important;background-color:#080808!important}
}

/* V15 — material realism pass. Layout stays V14; surfaces now come from the approved wireframe. */
@media (min-width:801px){
  .package-section{
    background-color:#b9824d!important;
    background-image:url('assets/images/materials/cardboard-real.jpg')!important;
    background-size:100% 100%!important;
    background-position:center!important;
    box-shadow:inset 0 7px 13px rgba(42,22,8,.22),inset 0 -8px 12px rgba(45,23,8,.18)!important;
    padding-top:18px!important;
  }
  .package-section:before{height:17px!important;background:linear-gradient(180deg,rgba(67,35,15,.65),rgba(202,143,84,.3) 38%,rgba(77,39,16,.5))!important;mix-blend-mode:multiply;opacity:.6!important}
  .how{
    background-color:#eee8dc!important;
    background-image:url('assets/images/materials/paper-real.jpg')!important;
    background-size:100% 100%!important;
    background-position:center!important;
    clip-path:polygon(.15% 2.8%,4% 1.2%,8% 2.1%,13% .9%,18% 2%,23% .7%,29% 1.8%,34% .6%,40% 1.7%,46% .5%,52% 1.8%,58% .7%,64% 1.9%,70% .6%,76% 1.7%,82% .7%,88% 1.9%,94% .8%,99.8% 2.1%,99.55% 97.3%,95% 98.6%,90% 97.8%,84% 99%,78% 97.9%,72% 99.1%,66% 98%,60% 99.2%,54% 98%,48% 99.1%,42% 97.9%,36% 99%,30% 97.8%,24% 99.1%,18% 97.9%,12% 99%,6% 97.7%,.25% 98.5%)!important;
    filter:drop-shadow(0 3px 2px rgba(46,24,10,.24));
  }
  /* Use the photographed/taped label from the approved wireframe rather than a CSS rectangle. */
  .tape-title{
    top:18px!important;width:225px!important;height:63px!important;min-width:0!important;padding:0!important;
    background:transparent url('assets/images/materials/how-title-real.png') center/100% 100% no-repeat!important;
    box-shadow:none!important;font-size:0!important;color:transparent!important;transform:translate(-50%,-50%) rotate(-.5deg)!important;
  }
  .tape-title:before,.tape-title:after{display:none!important}
  /* Subtle physical tape scraps at the paper corners. */
  .how:before{content:'';position:absolute;z-index:3;left:1.2%;top:1px;width:76px;height:33px;background:rgba(193,155,108,.53);transform:rotate(-4deg);box-shadow:inset 0 0 0 1px rgba(111,76,43,.08);opacity:.72;clip-path:polygon(2% 8%,97% 0,94% 88%,5% 100%);pointer-events:none}
  .brands{
    background-color:transparent!important;
    background-image:linear-gradient(90deg,transparent 0 29.4%,rgba(72,38,16,.20) 29.48%,rgba(255,255,255,.06) 29.62%,transparent 29.75%,transparent 65.8%,rgba(72,38,16,.14) 65.88%,rgba(255,255,255,.04) 66%,transparent 66.15%)!important;
  }
  .brands h2{
    color:#9f2d21!important;opacity:.68!important;filter:contrast(.9) blur(.18px)!important;
    text-shadow:1px 0 rgba(105,35,25,.16),-1px 1px rgba(105,35,25,.11)!important;
    -webkit-mask-image:radial-gradient(ellipse at center,#000 0 67%,rgba(0,0,0,.82) 78%,rgba(0,0,0,.55) 100%);
    mask-image:radial-gradient(ellipse at center,#000 0 67%,rgba(0,0,0,.82) 78%,rgba(0,0,0,.55) 100%);
  }
}

@media (max-width:800px){
  .package-section{background:#b9824d url('assets/images/materials/cardboard-real.jpg') center/cover!important}
  .how{background:#eee8dc url('assets/images/materials/paper-real.jpg') center/cover!important;filter:drop-shadow(0 3px 2px rgba(46,24,10,.22))}
  .tape-title{width:190px!important;height:53px!important;min-width:0!important;padding:0!important;font-size:0!important;color:transparent!important;background:transparent url('assets/images/materials/how-title-real.png') center/100% 100% no-repeat!important;box-shadow:none!important}
  .tape-title:before,.tape-title:after{display:none!important}
  .brands{background:transparent!important}
}

/* V16 — cleanup: real material feel without repeating wireframe artwork. */
@media (min-width:801px){
  .package-section{
    background-image:url('assets/images/materials/cardboard-clean-real.jpg')!important;
    background-size:cover!important;background-repeat:no-repeat!important;
  }
  .how{
    background-image:url('assets/images/materials/paper-clean-real.jpg')!important;
    background-size:cover!important;background-repeat:no-repeat!important;
  }
  /* only one intentional number per step; no texture ghosts */
  .step b{z-index:4!important;background:transparent!important}
  .brands{background-image:none!important}
}
@media (max-width:800px){
  .package-section{background-image:url('assets/images/materials/cardboard-clean-real.jpg')!important;background-size:cover!important}
  .how{background-image:url('assets/images/materials/paper-clean-real.jpg')!important;background-size:cover!important}
}

/* V17 — place the HOW IT WORKS tape physically over the cardboard/paper seam. */
@media (min-width:801px){
  .package-section{position:relative!important;}
  .package-section > .tape-title{
    z-index:20!important;
    top:18px!important;
    left:50%!important;
    transform:translate(-50%,-50%) rotate(-.5deg)!important;
    pointer-events:none!important;
  }
}
@media (max-width:800px){
  .package-section{position:relative!important;}
  .package-section > .tape-title{
    position:absolute!important;z-index:20!important;left:50%!important;top:12px!important;
    transform:translate(-50%,-50%) rotate(-.5deg)!important;pointer-events:none!important;
  }
}

/* V18 — stronger brand stamp + sound cue + true mobile hero composition */
.sound-badge{font-family:Arial,sans-serif!important;filter:none!important}
@media (min-width:801px){
  .brands{grid-template-columns:340px 1fr!important;gap:28px!important}
  .brands h2{
    width:310px!important;max-width:310px!important;white-space:normal!important;
    padding:12px 15px 10px!important;border:4px solid rgba(137,31,22,.72)!important;
    outline:2px solid rgba(137,31,22,.42)!important;outline-offset:-9px!important;
    color:#98271e!important;font-size:28px!important;line-height:.9!important;text-align:center!important;
    letter-spacing:.6px!important;transform:rotate(-1.2deg)!important;opacity:.76!important;
    filter:contrast(.88) blur(.16px)!important;
    text-shadow:1px 0 rgba(95,23,18,.18),-1px 1px rgba(95,23,18,.12)!important;
    -webkit-mask-image:radial-gradient(ellipse at 45% 48%,#000 0 58%,rgba(0,0,0,.86) 72%,rgba(0,0,0,.55) 100%)!important;
    mask-image:radial-gradient(ellipse at 45% 48%,#000 0 58%,rgba(0,0,0,.86) 72%,rgba(0,0,0,.55) 100%)!important;
  }
  .logo-grid{grid-template-columns:repeat(5,minmax(82px,1fr))!important;gap:8px 22px!important}
}
@media (max-width:800px){
  .hero{height:94svh!important;min-height:620px!important;max-height:920px!important;aspect-ratio:auto!important;background:#080808!important;display:block!important}
  .hero-reference{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;background-image:url('assets/images/site/hero-mobile-extended.jpg')!important;background-size:cover!important;background-position:center center!important;background-repeat:no-repeat!important}
  .brands h2{
    width:min(88%,340px)!important;max-width:none!important;margin:22px auto 10px!important;padding:11px 13px 9px!important;
    border:4px solid rgba(137,31,22,.72)!important;outline:2px solid rgba(137,31,22,.42)!important;outline-offset:-8px!important;
    color:#98271e!important;font-size:27px!important;line-height:.92!important;white-space:normal!important;text-align:center!important;
    transform:rotate(-1.1deg)!important;opacity:.76!important;filter:contrast(.9) blur(.14px)!important;
  }
}

/* V19 — matching tape label for brands + approved vertical mobile hero */
.brands-tape{
  position:absolute;
  z-index:25;
  left:50%;
  transform:translate(-50%,-50%) rotate(1.5deg);
  width:max-content;
  padding:10px 28px 9px;
  background:#c9a06d;
  color:#111;
  font-family:'Marker Felt','Comic Sans MS',cursive;
  font-size:23px;
  font-weight:900;
  line-height:1;
  letter-spacing:.2px;
  box-shadow:0 2px 4px rgba(0,0,0,.15);
  pointer-events:none;
}
.brands-tape:before,.brands-tape:after{
  content:'';position:absolute;top:-3px;bottom:-3px;width:22px;
  background:rgba(212,180,132,.55);z-index:-1
}
.brands-tape:before{left:-13px;transform:rotate(-3deg)}
.brands-tape:after{right:-13px;transform:rotate(4deg)}
.brands{grid-template-columns:1fr!important;padding-top:38px!important}
.logo-grid{width:100%!important}
@media (min-width:801px){
  .brands-tape{font-size:23px;padding:10px 30px 9px;transform:translate(-50%,-50%) rotate(1.5deg)}
  .brands{padding-left:5vw!important;padding-right:5vw!important}
  .logo-grid{grid-template-columns:repeat(5,minmax(90px,1fr))!important;gap:16px 38px!important}
}
@media (max-width:800px){
  .hero{height:94svh!important;min-height:620px!important;max-height:920px!important;aspect-ratio:auto!important;background:#080808!important;display:block!important}
  .hero-reference{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;background-image:url('assets/images/site/hero-mobile-final.png')!important;background-size:cover!important;background-position:center center!important;background-repeat:no-repeat!important}
  .brands-tape{font-size:17px;padding:9px 18px 8px;max-width:82vw;white-space:nowrap;transform:translate(-50%,-50%) rotate(1.5deg)}
  .brands{padding:40px 20px 34px!important}
  .logo-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:28px 24px!important}
}

/* V20 — give the cardboard brand wall more breathing room before the CTA */
@media (min-width:801px){
  .brands{padding-bottom:30px!important;}
  .logo-grid{padding-bottom:38px!important;}
}
@media (max-width:800px){
  .brands{padding-bottom:52px!important;}
  .logo-grid{padding-bottom:10px!important;}
}

/* V21 — spacing + CTA composition polish */
@media (min-width:801px){
  /* Keep the tape clear of the first logo row and add air below the logos. */
  .brands{padding-top:68px!important;padding-bottom:66px!important;}
  .logo-grid{padding-top:0!important;padding-bottom:0!important;row-gap:30px!important;}

  /* Keep the left CTA artwork visually centered in its half rather than hugging the form. */
  .cta{grid-template-columns:1fr 1fr!important;}
  .cta-art{inset:0 50% 0 0!important;background-position:center center!important;background-size:cover!important;}
  .cta-form-wrap{grid-column:2!important;justify-self:stretch!important;max-width:none!important;padding-left:4.5vw!important;padding-right:7vw!important;box-shadow:none!important;}
}
@media (max-width:800px){
  .brands{padding-top:62px!important;padding-bottom:58px!important;}
  .logo-grid{padding-top:0!important;padding-bottom:0!important;}
}

/* V22 — mobile hero: closer framing, less headroom, and a visible hint of the next section */
@media (max-width:800px){
  .hero{
    height:78svh!important;
    min-height:540px!important;
    max-height:760px!important;
  }
  .hero-reference{
    background-image:url('assets/images/site/hero-mobile-final.png')!important;
    background-size:118% auto!important;
    background-position:center 61%!important;
    background-repeat:no-repeat!important;
    background-color:#080808!important;
  }
}
@media (max-width:430px){
  .hero{height:76svh!important;min-height:520px!important;max-height:720px!important;}
  .hero-reference{background-size:122% auto!important;background-position:center 62%!important;}
}

/* V23 — definitive brand spacing + clean CTA split (no baked-in duplicate form) */
@media (min-width:801px){
  .brands{padding-top:105px!important;padding-bottom:72px!important;}
  .logo-grid{row-gap:34px!important;}
  .cta{display:grid!important;grid-template-columns:1fr 1fr!important;min-height:430px!important;background:#080808!important;overflow:hidden!important;}
  .cta-art{position:absolute!important;left:0!important;top:0!important;bottom:0!important;right:50%!important;background-image:url('assets/images/site/cta-box-only.png')!important;background-size:cover!important;background-position:center center!important;background-repeat:no-repeat!important;}
  .cta-form-wrap{position:relative!important;grid-column:2!important;left:auto!important;right:auto!important;bottom:auto!important;width:100%!important;max-width:none!important;padding:44px 7vw 44px 4.5vw!important;background:#080808!important;box-shadow:none!important;}
}
@media (max-width:800px){
  .brands{padding-top:78px!important;padding-bottom:62px!important;}
  .cta-art{background-image:url('assets/images/site/cta-box-only.png')!important;}
}

/* V24 — mobile CTA artwork: smaller + centered so the full handwritten box message reads cleanly */
@media (max-width:800px){
  .cta{min-height:800px!important;}
  .cta-art{
    height:390px!important;
    left:0!important;
    right:0!important;
    top:0!important;
    bottom:auto!important;
    background-image:url('assets/images/site/cta-box-only.png')!important;
    background-size:auto 360px!important;
    background-position:center 20px!important;
    background-repeat:no-repeat!important;
    background-color:#080808!important;
  }
  .cta-form-wrap{padding-top:52px!important;}
}
@media (max-width:430px){
  .cta{min-height:780px!important;}
  .cta-art{
    height:365px!important;
    background-size:auto 335px!important;
    background-position:center 18px!important;
  }
  .cta-form-wrap{padding-top:44px!important;}
}

/* V25 — approved mobile hero composition + genuinely centered CTA artwork */
@media (max-width:800px){
  .hero{
    height:78svh!important;
    min-height:560px!important;
    max-height:720px!important;
    background:#080808!important;
  }
  .hero-reference{
    background-image:url('assets/images/site/hero-mobile-v25.png')!important;
    background-size:cover!important;
    background-position:center 40%!important;
    background-repeat:no-repeat!important;
  }

  /* Let the entire CTA artwork fit the phone width instead of cropping its right side. */
  .cta{min-height:810px!important;background:#080808!important;}
  .cta-art{
    left:0!important;right:0!important;top:0!important;bottom:auto!important;
    width:100%!important;height:355px!important;
    background-image:url('assets/images/site/cta-box-only.png')!important;
    background-size:100% auto!important;
    background-position:center center!important;
    background-repeat:no-repeat!important;
    background-color:#080808!important;
  }
  .cta-form-wrap{
    left:0!important;right:0!important;bottom:24px!important;
    width:100%!important;padding:0 7vw 22px!important;
  }
}
@media (max-width:430px){
  .hero{height:76svh!important;min-height:535px!important;max-height:680px!important;}
  .hero-reference{background-position:center 38%!important;}
  .cta{min-height:790px!important;}
  .cta-art{height:330px!important;background-size:100% auto!important;background-position:center center!important;}
  .cta-form-wrap{padding-left:6vw!important;padding-right:6vw!important;bottom:18px!important;}
}

/* V26 — mobile framing corrections */
@media (max-width:800px){
  .hero{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:465/820!important;
    background:#080808!important;
    overflow:hidden!important;
  }
  .hero-reference{
    background-image:url('assets/images/site/hero-mobile-v26.png')!important;
    background-size:100% 100%!important;
    background-position:center center!important;
    background-repeat:no-repeat!important;
  }
  .cta{
    min-height:780px!important;
    padding-top:0!important;
    background:#080808!important;
  }
  .cta-art{
    top:0!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    height:auto!important;
    aspect-ratio:1030/725!important;
    background-image:url('assets/images/site/cta-mobile-v26.png')!important;
    background-size:100% 100%!important;
    background-position:center center!important;
    background-repeat:no-repeat!important;
    background-color:transparent!important;
  }
  .cta-form-wrap{
    padding-top:28px!important;
  }
}
@media (max-width:430px){
  .hero{height:auto!important;min-height:0!important;max-height:none!important;aspect-ratio:465/820!important;}
  .cta{min-height:760px!important;}
  .cta-art{height:auto!important;aspect-ratio:1030/725!important;background-size:100% 100%!important;background-position:center center!important;}
  .cta-form-wrap{padding-top:24px!important;}
}

/* V27 — center the mobile CTA artwork within its rectangular stage */
@media (max-width:800px){
  .cta-art{
    background-size:92% auto!important;
    background-position:center center!important;
    background-color:#080808!important;
  }
}
@media (max-width:430px){
  .cta-art{
    background-size:92% auto!important;
    background-position:center center!important;
  }
}


/* V30 — 18-video gallery with 9-item initial view */
.gallery-extra{display:none!important}
.gallery.expanded .gallery-extra{display:block!important}
.gallery-more-wrap{display:flex;justify-content:center;padding:28px 0 4px}
.gallery-more{appearance:none;border:1px solid rgba(245,241,233,.6);background:transparent;color:#f5f1e9;padding:12px 24px;font-weight:900;font-size:12px;letter-spacing:2px;cursor:pointer;transition:background .2s,color .2s}
.gallery-more:hover{background:#f5f1e9;color:#080808}
.gallery-more:focus-visible{outline:2px solid #f5f1e9;outline-offset:4px}
@media(max-width:800px){.gallery-more-wrap{padding-top:20px}.gallery-more{min-height:44px;padding:12px 22px}}

.viewer-controls{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap}


/* V33 — intentional full-screen playback controls */
.viewer-media{position:relative;cursor:pointer}
.viewer-play-overlay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.92);width:76px;height:76px;border-radius:50%;border:1px solid rgba(255,255,255,.72);background:rgba(0,0,0,.48);color:#fff;font-size:30px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0 0 0 5px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,transform .18s ease;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.viewer-play-overlay.show{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
@media(max-width:800px){.viewer-play-overlay{width:68px;height:68px;font-size:27px}}

/* V34: preview videos fill the existing cards; loading stays dark. */
.card{aspect-ratio:9/13;background:#080808}
.card video{display:block;width:100%;height:100%;object-fit:cover;background:#080808}
.phone video{display:block;background:#080808}
.viewer-media{background:#080808}
@media(max-width:800px){.card{aspect-ratio:9/14}}

/* V35: clear video loading and desktop expansion affordance. */
.viewer-loading,.viewer-error{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;pointer-events:none;background:rgba(8,8,8,.25);color:#f5f1e9;z-index:1}
.viewer-loading[hidden],.viewer-error[hidden]{display:none}
.loading-ring{width:42px;height:42px;border:3px solid rgba(245,241,233,.22);border-top-color:#f5f1e9;border-radius:50%;animation:video-loading .8s linear infinite}
.loading-copy,.viewer-error{font-size:10px;font-weight:800;letter-spacing:2px;text-align:center;line-height:1.8}
@keyframes video-loading{to{transform:rotate(360deg)}}
.card-expand{position:absolute;top:12px;right:12px;border:1px solid rgba(255,255,255,.55);border-radius:99px;padding:7px 10px;background:rgba(8,8,8,.6);color:#fff;font-size:10px;font-weight:800;letter-spacing:1px;opacity:0;transform:translateY(4px);transition:opacity .2s ease,transform .2s ease;pointer-events:none}
.card video{transition:transform .25s ease}
@media(hover:hover) and (pointer:fine){
  .card:hover video{transform:scale(1.035)}
  .card:hover .card-expand{opacity:1;transform:translateY(0)}
}
.card:focus-visible{outline:2px solid #f5f1e9;outline-offset:4px}
.card:focus-visible .card-expand{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.card video,.card-expand{transition:none}.card:hover video{transform:none}.loading-ring{animation-duration:1.6s}}

/* V36: clean cards and touch-friendly expansion cues. */
.card-label{display:none!important}
.mobile-scroll-cue,.gallery-tap-hint{display:none}
@media(max-width:800px){
  .mobile-scroll-cue{display:flex;align-items:center;justify-content:center;gap:12px;padding:15px 12px 19px;color:#f5f1e9;background:#080808;text-decoration:none;font-size:10px;font-weight:700;letter-spacing:2px}
  .mobile-scroll-cue span{font-size:20px;line-height:1}
  .gallery-tap-hint{display:block;margin:0 0 14px;color:#d8d3cb;font-size:10px;font-weight:700;letter-spacing:1.5px}
}
@media(hover:none),(pointer:coarse){
  .gallery-tap-hint{display:block;margin:0 0 14px;color:#d8d3cb;font-size:10px;font-weight:700;letter-spacing:1.5px}
  .card-expand{opacity:1;transform:none;top:9px;right:9px;width:28px;height:28px;padding:0;display:grid;place-items:center;background:rgba(8,8,8,.55)}
  .expand-word{display:none}
  .expand-icon{font-size:17px;line-height:1}
}

/* V37: four outward arrows for mobile expansion. */
.expand-icon{width:15px;height:15px;vertical-align:middle;flex-shrink:0}
@media(hover:none),(pointer:coarse){.expand-icon{width:17px;height:17px}}

/* V38: small rightward adjustment to mobile CTA artwork. */
@media(max-width:800px){
  .cta-art{background-position:calc(50% + 8px) center!important;}
}

/* V39: one clear mobile prompt and a scroll cue over the hero. */
@media(max-width:800px){
  .hero .mobile-scroll-cue{position:absolute;z-index:2;left:0;right:0;bottom:24px;padding:24px 12px 19px;background:linear-gradient(transparent,rgba(0,0,0,.38));text-shadow:0 1px 5px rgba(0,0,0,.8)}
  .work-heading .sound-callout{display:none!important}
  .work-heading{margin-bottom:14px}
  .gallery-tap-hint{margin:0 0 16px;font-size:10px;letter-spacing:1.5px;color:#f5f1e9}
}

/* V40: controls stay above video/loading layers on mobile. */
.viewer-inner{position:relative;z-index:1}
.viewer-close,.viewer .nav{z-index:5;pointer-events:auto;touch-action:manipulation}
.viewer-close{min-width:44px;min-height:44px}
.viewer-play-overlay{z-index:3}
@media(max-width:800px){
  .viewer-close{top:max(10px,env(safe-area-inset-top));right:12px}
  .viewer .nav{bottom:max(18px,env(safe-area-inset-bottom))}
}

/* V42: full-width, centered mobile CTA artwork. */
@media(max-width:800px){
  .cta-art{left:0!important;right:0!important;width:100%!important;background-size:cover!important;background-position:center center!important;}
}

/* V44: clear breathing room between mobile artwork and the invitation. */
@media(max-width:800px){
  .cta{display:block!important;min-height:0!important;}
  .cta-art{position:relative!important;top:auto!important;bottom:auto!important;}
  .cta-form-wrap{position:relative!important;top:auto!important;bottom:auto!important;left:0!important;right:0!important;padding-top:52px!important;padding-bottom:32px!important;background:#080808!important;box-shadow:none!important;}
}

/* V45: explicit black separation above the mobile invitation. */
@media(max-width:800px){
  .cta .cta-form-wrap{padding-top:80px!important;}
  .cta .cta-note{margin-top:0!important;}
}

/* V46: compact personal introduction, cleaner CTA, and centered mobile steps. */
.about-ben{background:#080808;color:#151515;padding:54px 24px 64px}
.about-card{max-width:660px;margin:0 auto;padding:34px;background:#eee8dc;box-shadow:5px 7px 0 #b88350}
.about-intro{display:flex;align-items:center;gap:24px}
.about-avatar{width:110px;height:110px;flex-shrink:0;object-fit:cover;border-radius:50%;background:#fff}
.about-card h2{font-family:Impact,'Arial Black',sans-serif;font-size:42px;line-height:1;margin:0 0 10px}
.about-handle{font-size:14px;margin:0 0 9px;line-height:1.5}
.about-followers{font-size:12px;color:#68513d}
.about-bio{font-size:16px;line-height:1.7;margin:25px 0}
.about-instagram{display:inline-flex;align-items:center;gap:14px;color:#151515;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:7px;font-size:12px;font-weight:800;letter-spacing:1px}
.about-instagram:focus-visible{outline:2px solid currentColor;outline-offset:5px}
.step-arrow-mobile{display:none}
.cta .cta-art{background-image:url('assets/images/site/cta-clean-box.png')!important}
@media(max-width:800px){
  .about-ben{padding:40px 22px 50px}
  .about-card{padding:26px}
  .about-intro{gap:16px}
  .about-avatar{width:82px;height:82px}
  .about-card h2{font-size:32px}
  .about-handle{font-size:12px}
  .about-bio{font-size:15px}
  .how-grid .arrow{transform:none!important;display:flex!important;align-items:center;justify-content:center;width:100%!important;height:48px!important;margin:0 auto 16px!important;line-height:1!important;text-align:center}
  .step-arrow-desktop{display:none}
  .step-arrow-mobile{display:block}
  .how-grid .step{display:flex;flex-direction:column;align-items:center;text-align:center}
  .how-grid .step b{position:static!important;left:auto!important;top:auto!important;transform:none!important;margin:0 auto 12px!important;}
  .how-grid .asset-box{width:100%;justify-items:center}
  .how-grid .phone{margin-left:auto!important;margin-right:auto!important}
  .cta .cta-art{aspect-ratio:3/2!important;background-size:cover!important;background-position:center center!important}
}
@media(max-width:380px){.about-intro{flex-direction:column;text-align:center}.about-card h2{font-size:34px}}

@media(max-width:800px){.hero .hero-reference{background-image:url('assets/images/site/hero-mobile-sharp.png')!important}}

/* V48: clean transparent shipping box cutout. */
.asset-box img[src$='how-box-cutout.png']{max-width:245px;max-height:165px;object-fit:contain;filter:none;}

/* Keep the complete desktop artwork, including its printed arrow. */
@media(min-width:801px){
 .hero{height:auto!important;min-height:0!important;max-height:none!important;aspect-ratio:2155/730!important;}
 .hero .hero-reference{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;background-size:100% 100%!important;background-position:center!important;}
}
@media(max-width:800px){
 .hero .mobile-scroll-cue{bottom:32px!important;}
}

@media(max-width:800px){.hero .mobile-scroll-cue{background:transparent!important;text-shadow:0 1px 4px rgba(0,0,0,.8);}}