@font-face{font-family:"Montserrat";src:url("_fonts/Montserrat-Medium.otf") format("opentype");font-weight:500;font-style:normal;font-display:block}
@font-face{font-family:"Montserrat";src:url("_fonts/Montserrat-SemiBold.otf") format("opentype");font-weight:600;font-style:normal;font-display:block}
@font-face{font-family:"Montserrat";src:url("_fonts/Montserrat-Bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:block}
@font-face{font-family:"Montserrat";src:url("_fonts/Montserrat-ExtraBold.otf") format("opentype");font-weight:800;font-style:normal;font-display:block}
@font-face{font-family:"Montserrat";src:url("_fonts/Montserrat-Black.otf") format("opentype");font-weight:900;font-style:normal;font-display:block}
:root{
  --navy:#001c28;
  --navy-2:#003d57;
  --gold:#bb924f;
  --cream:#f6eee4;
  --tan:#e4d5c2;
  --white:#fff;
  --ink:#08171c;
  --shadow:0 30px 80px rgba(0,0,0,.28);
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:#111;overflow:hidden}
body{position:relative;font-family:'Montserrat',Arial,sans-serif}
.stage{
  position:absolute;
  top:50%;
  left:50%;
  width:1080px;
  height:1920px;
  aspect-ratio:9/16;
  transform-origin:center center;
  overflow:hidden;
  background:var(--cream);
  color:var(--navy);
  transform:translateZ(0);
  isolation:isolate;
}
.scene{position:absolute;inset:0;overflow:hidden;opacity:0;pointer-events:none}
.paper-grain{position:absolute;inset:0;z-index:100;pointer-events:none;opacity:.13;mix-blend-mode:multiply;background-image:repeating-linear-gradient(7deg,rgba(0,0,0,.035) 0 1px,transparent 1px 5px),repeating-linear-gradient(92deg,rgba(255,255,255,.06) 0 1px,transparent 1px 7px)}
.controls{display:none}
body.capture .controls{display:none}

/* HOOK */
.scene-hook{background:var(--navy);color:var(--cream)}
.hook-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:54% center;filter:saturate(.98) contrast(1.06);transform:scale(1.08)}
.hook-shade{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(0,28,40,.90) 0%,rgba(0,28,40,.63) 48%,rgba(0,28,40,.22) 100%),
  linear-gradient(180deg,rgba(0,28,40,.20),rgba(0,28,40,.45) 72%,rgba(0,28,40,.84));}
.hook-logo{position:absolute;z-index:8;left:48px;top:54px;width:590px;height:auto;filter:drop-shadow(0 10px 18px rgba(0,0,0,.28))}
.hook-kicker{position:absolute;z-index:6;left:76px;top:332px;color:var(--gold);font-size:24px;font-weight:900;letter-spacing:.18em;white-space:nowrap}
.hook-job{position:absolute;z-index:6;left:72px;top:402px;background:var(--cream);color:var(--navy);font-size:68px;line-height:.92;font-weight:900;letter-spacing:-.045em;padding:22px 30px 20px;box-shadow:0 18px 38px rgba(0,0,0,.25);transform:rotate(-1deg);white-space:nowrap}
.hook-big{position:absolute;z-index:7;left:68px;top:620px;display:flex;flex-direction:column;align-items:flex-start;gap:0;filter:drop-shadow(0 24px 32px rgba(0,0,0,.25))}
.hook-make{font-size:104px;line-height:.88;font-weight:900;letter-spacing:-.055em;color:white;white-space:nowrap;text-shadow:0 4px 0 rgba(0,0,0,.08)}
.hook-hungry{font-size:152px;line-height:.82;font-weight:900;letter-spacing:-.065em;color:var(--gold);white-space:nowrap;text-shadow:0 5px 0 rgba(0,0,0,.10)}
.hook-food-card{position:absolute;z-index:5;right:60px;top:210px;width:282px;height:356px;background:#fff;padding:12px 12px 42px;box-shadow:0 35px 80px rgba(0,0,0,.34);transform:rotate(8deg)}
.hook-food-card img{width:100%;height:100%;object-fit:cover}
.hook-phone{position:absolute;z-index:9;right:46px;bottom:190px;width:356px;height:732px;background:#090a0b;border:10px solid #090a0b;border-radius:48px;box-shadow:0 42px 90px rgba(0,0,0,.42);overflow:hidden;transform:rotate(3.5deg)}
.hook-phone img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:34px}
.hook-phone-notch{position:absolute;z-index:4;top:9px;left:50%;transform:translateX(-50%);width:105px;height:17px;background:#1f2022;border-radius:20px}
.hook-easy{position:absolute;z-index:10;left:64px;bottom:785px;width:640px;display:flex;flex-direction:column;align-items:flex-start}
.hook-easy span{display:inline-block;color:white;font-size:28px;font-weight:900;letter-spacing:.18em;margin:0 0 13px 7px}
.hook-easy strong{display:inline-block;background:var(--cream);color:var(--navy);font-size:74px;line-height:.92;font-weight:900;letter-spacing:-.045em;padding:22px 30px 20px;transform:rotate(-1.5deg);box-shadow:0 18px 38px rgba(0,0,0,.24);white-space:nowrap}
.hook-actions{position:absolute;z-index:11;left:68px;bottom:230px;display:flex;flex-direction:column;align-items:flex-start;gap:16px;width:430px}
.hook-actions span{background:var(--gold);color:white;border:2px solid rgba(255,255,255,.22);font-size:31px;font-weight:900;letter-spacing:.075em;padding:21px 28px;box-shadow:0 12px 24px rgba(0,0,0,.18);white-space:nowrap}

/* WORK */
.scene-work{background:var(--cream);padding:165px 50px 120px}
.eyebrow-row{display:flex;align-items:center;justify-content:center;gap:20px;font-size:24px;font-weight:800;letter-spacing:.16em;color:var(--gold)}
.eyebrow-row span{height:2px;background:var(--gold);width:108px}
.scene-work h2{font-size:96px;line-height:.91;letter-spacing:-.048em;margin:26px 0 0;text-align:center;color:var(--navy);font-weight:900}
.scene-work h2 b{color:var(--gold)}
.portfolio-stack{position:absolute;left:50%;top:565px;width:760px;height:1120px;transform:translateX(-50%)}
.site-card{position:absolute;left:144px;top:0;width:472px;height:962px;background:white;margin:0;padding:18px;box-shadow:0 35px 70px rgba(0,28,40,.22);transform-origin:center 84%;}
.site-card img{width:100%;height:100%;object-fit:cover;object-position:top;border:1px solid #ddd}

.card-tape{position:absolute;width:160px;height:40px;background:rgba(228,213,194,.85);left:50%;top:-18px;transform:translateX(-50%) rotate(-2deg);z-index:4;box-shadow:0 3px 9px rgba(0,0,0,.08)}
.site-1{transform:rotate(-5.5deg)}.site-2{transform:rotate(5deg)}.site-3{transform:rotate(-2.5deg)}.site-4{transform:rotate(2.5deg)}
.star-spark{position:absolute;color:var(--gold);font-size:92px;font-weight:700}.spark-a{left:58px;top:715px}.spark-b{right:56px;bottom:190px;font-size:62px}

/* SERVICES */
.scene-services{background:#001c28;color:white}
.services-heading{position:absolute;top:118px;left:54px;z-index:6}
.services-heading small{font-size:30px;letter-spacing:.15em;font-weight:900;color:var(--gold)}
.services-heading h2{font-size:136px;line-height:.82;letter-spacing:-.055em;margin:18px 0 0;font-weight:900}
.services-heading h2 em{font-style:normal;color:var(--gold)}
.phone-shell{position:absolute;left:50%;top:510px;width:500px;height:1000px;background:#0c0c0d;border:12px solid #090909;border-radius:62px;transform:translateX(-50%) rotate(-1deg);box-shadow:0 45px 90px rgba(0,0,0,.42);z-index:5;padding:22px 12px 18px}
.phone-speaker{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:138px;height:18px;border-radius:20px;background:#242424;z-index:7}
.phone-window{width:100%;height:100%;border-radius:37px;overflow:hidden;background:#fff}
.phone-window img{width:100%;height:100%;object-fit:cover;object-position:top}
.service-card{
  position:absolute;
  width:260px;
  min-height:246px;
  background:var(--cream);
  color:var(--navy);
  padding:22px 18px 20px;
  box-shadow:0 22px 48px rgba(0,0,0,.20);
  z-index:3;
  border:2px solid rgba(187,146,79,.30);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
}
.service-card img{
  width:92px;
  height:92px;
  object-fit:contain;
  margin:0 0 14px;
  float:none;
}
.service-card strong{
  display:block;
  font-size:27px;
  line-height:1.03;
  letter-spacing:-.02em;
  font-weight:900;
  margin:0;
  max-width:220px;
}
.service-card span{
  display:block;
  clear:none;
  font-size:18px;
  line-height:1.30;
  font-weight:600;
  margin-top:10px;
  max-width:220px;
}
.svc-1{left:18px;top:770px;transform:rotate(-4deg)}
.svc-2{right:18px;top:735px;transform:rotate(4deg)}
.svc-3{left:18px;top:1175px;transform:rotate(3deg)}
.svc-4{right:18px;top:1140px;transform:rotate(-4deg)}
.gold-scribble{position:absolute;right:58px;top:230px;font-size:92px;color:var(--gold);transform:rotate(8deg);opacity:.7}

/* HARD */
.scene-hard{background:var(--cream);color:var(--navy)}
.hard-copy{position:absolute;top:190px;left:76px;right:76px;z-index:5}
.hard-copy span{font-size:38px;font-weight:800;letter-spacing:.18em;display:block;color:var(--gold)}
.hard-copy strong{display:block;font-size:101px;line-height:.88;letter-spacing:-.06em;margin-top:15px;font-weight:900}
.desktop-card{position:absolute;left:70px;top:590px;width:885px;height:680px;background:#fff;padding:62px 18px 18px;box-shadow:0 42px 85px rgba(0,28,40,.25);transform:rotate(-3.5deg);z-index:2}
.desktop-card img{width:100%;height:100%;object-fit:cover;object-position:top;border:1px solid #ddd}
.browser-dots{position:absolute;top:23px;left:28px;display:flex;gap:12px}.browser-dots i{display:block;width:14px;height:14px;border-radius:50%;background:var(--tan)}.browser-dots i:nth-child(2){background:var(--gold)}.browser-dots i:nth-child(3){background:var(--navy-2)}
.mobile-card{position:absolute;right:65px;top:840px;width:315px;height:665px;background:#0b0b0c;border:10px solid #0b0b0c;border-radius:45px;overflow:hidden;box-shadow:0 34px 68px rgba(0,0,0,.34);transform:rotate(5deg);z-index:4}
.mobile-card img{width:100%;height:100%;object-fit:cover;object-position:top}
.gold-banner{position:absolute;left:-45px;right:-45px;bottom:280px;background:var(--gold);color:white;font-size:54px;font-weight:900;letter-spacing:.02em;text-align:center;padding:28px 30px;transform:rotate(-2deg);z-index:6;box-shadow:0 18px 42px rgba(0,0,0,.17)}
.tiny-note{position:absolute;bottom:155px;left:34px;right:34px;text-align:center;font-size:30px;font-weight:900;letter-spacing:.08em;color:var(--navy);z-index:7}

/* FINALE */
.scene-finale{background:var(--navy);color:white;display:flex;flex-direction:column;align-items:center;text-align:center;padding:175px 72px 115px}
.final-rays{position:absolute;inset:-300px;background:repeating-conic-gradient(from 8deg,rgba(187,146,79,.06) 0deg 5deg,transparent 5deg 19deg);transform:rotate(0deg)}
.final-logo{position:relative;width:670px;height:auto;z-index:2;filter:drop-shadow(0 26px 45px rgba(0,0,0,.28));}
.final-kicker{position:relative;margin-top:52px;font-size:30px;letter-spacing:.24em;font-weight:800;color:var(--gold);z-index:2}
.scene-finale h2{position:relative;font-size:78px;line-height:.95;letter-spacing:-.042em;font-weight:900;margin:26px 0 0;z-index:2}
.scene-finale h2 span{color:var(--gold)}
.final-url{position:relative;margin-top:40px;border:2px solid rgba(255,255,255,.75);padding:22px 34px;font-size:30px;letter-spacing:.12em;font-weight:800;z-index:2}
.final-stars{position:relative;margin-top:34px;font-size:40px;color:var(--gold);letter-spacing:.25em;z-index:2}



.work-stars{position:absolute;inset:0;z-index:1;pointer-events:none}
.star-deco{
  position:absolute;
  color:var(--gold);
  font-weight:700;
  line-height:1;
  text-shadow:0 6px 16px rgba(187,146,79,.12);
  transform-origin:center;
}
.star-1{left:48px;top:340px;font-size:44px}
.star-2{left:110px;top:590px;font-size:25px}
.star-3{left:58px;top:1040px;font-size:31px}
.star-4{right:70px;top:430px;font-size:39px}
.star-5{right:150px;top:640px;font-size:22px}
.star-6{right:54px;top:980px;font-size:29px}
.star-7{left:72px;bottom:270px;font-size:36px}
.star-8{left:220px;bottom:175px;font-size:23px}
.star-9{right:88px;bottom:235px;font-size:42px}
.star-10{right:235px;bottom:140px;font-size:24px}
.star-11{left:430px;top:270px;font-size:20px}
.star-12{right:405px;top:290px;font-size:28px}

.service-stars{position:absolute;inset:0;z-index:1;pointer-events:none}
.svc-star{
  position:absolute;
  color:var(--gold);
  font-weight:700;
  line-height:1;
  transform-origin:center;
}
.svc-star-1{left:68px;top:385px;font-size:40px}
.svc-star-2{left:195px;top:500px;font-size:24px}
.svc-star-3{left:92px;top:1010px;font-size:20px}
.svc-star-4{right:74px;top:420px;font-size:36px}
.svc-star-5{right:205px;top:535px;font-size:22px}
.svc-star-6{right:70px;top:1045px;font-size:24px}
.svc-star-7{left:82px;bottom:220px;font-size:33px}
.svc-star-8{left:265px;bottom:145px;font-size:21px}
.svc-star-9{right:88px;bottom:215px;font-size:39px}
.svc-star-10{right:270px;bottom:126px;font-size:22px}