:root {
  --ink:#10100f;
  --paper:#f8f4ea;
  --yellow:#ffda58;
  --pink:#fa82b5;
  --blue:#70bafb;
  --hand:'Kalam','Patrick Hand',cursive;
  --marker:'Knewave','Kalam',cursive;
  --sans:'DM Sans',Arial,sans-serif;
  --section-gap:95px;
  --ease:cubic-bezier(.2,.75,.25,1)
}

* {
  box-sizing:border-box
}
html {
  scroll-behavior:auto;
  scroll-padding-top:20px
}
body {
  min-width:320px;
  margin:0;
  color:var(--ink);
  font:15px/1.38 var(--sans);
  background-color:var(--paper);
  background-image:linear-gradient(rgba(255,255,255,.22),rgba(255,255,255,.22)),url('assets/individual/paper-background.png');
  background-size:941px auto;
  background-position:top center;
  -webkit-font-smoothing:antialiased
}
a {
  color:inherit;
  text-decoration:none
}
button {
  font:inherit
}
img {
  display:block;
  max-width:100%
}
figure {
  margin:0
}
::selection {
  background:var(--pink)
}
.hand {
  font-family:var(--hand);
  font-weight:700
}
.skip-link {
  position:fixed;
  z-index:999;
  top:8px;
  left:8px;
  padding:8px 12px;
  background:var(--yellow);
  transform:translateY(-150%)
}
.skip-link:focus {
  transform:translateY(0)
}
.scroll-meter {
  position:fixed;
  z-index:100;
  top:0;
  left:0;
  width:100%;
  height:3px;
  pointer-events:none
}
.scroll-meter span {
  display:block;
  width:0;
  height:100%;
  background:#fa65a2
}

.site-header,main,.site-footer {
  position:relative;
  width:min(100%,941px);
  margin:auto
}
.site-header {
  height:83px;
  z-index:50
}
.brand {
  position:absolute;
  top:25px;
  left:52px;
  display:flex;
  align-items:flex-start;
  transform:rotate(-5deg);
  transition:transform .28s var(--ease)
}
.brand:hover {
  transform:rotate(-8deg) translateY(-4px) scale(1.055)
}
.brand-name {
  font:400 29px/.78 var(--marker);
  letter-spacing:-.075em
}
.brand-rays {
  width:36px;
  height:42px;
  margin:-5px 0 0 5px;
  overflow:visible
}
.brand-rays path {
  fill:none;
  stroke:var(--ink);
  stroke-width:3.2;
  stroke-linecap:round
}
.brand-rays {
  transition:transform .28s var(--ease)
}
.brand:hover .brand-rays {
  transform:rotate(12deg) translateX(3px)
}
.main-nav {
  position:absolute;
  top:23px;
  left:258px;
  right:50px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  font:700 15px var(--hand)
}
.main-nav>a:not(.nav-cta) {
  white-space:nowrap
}
.main-nav>a:not(.nav-cta):hover {
  text-decoration:underline;
  text-decoration-color:#f572ad;
  text-decoration-thickness:3px;
  text-underline-offset:4px
}
.nav-cta {
  position:relative;
  margin-left:auto;
  width:159px;
  height:43px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:7px;
  color:#fff;
  background:url('assets/paper/strip-black.svg') center/100% 100% no-repeat;
  transform:rotate(-2deg);
  white-space:nowrap;
  font-size:16px;
  transition:transform .28s var(--ease),filter .28s var(--ease)
}
.nav-cta:hover {
  transform:rotate(2deg) translateY(-4px) scale(1.055);
  filter:drop-shadow(3px 5px 2px rgba(0,0,0,.17))
}
.nav-cta span {
  font:700 21px var(--sans)
}
.nav-rays {
  position:absolute;
  right:-28px;
  top:0;
  width:27px;
  height:47px;
  fill:none;
  stroke:var(--ink);
  stroke-width:3.8;
  stroke-linecap:round;
  transition:transform .28s var(--ease)
}
.nav-cta:hover .nav-rays {
  transform:translateX(4px) scale(1.08)
}
.menu-toggle {
  display:none
}

.hero,.process,.services,.results,.closing,.clients {
  position:relative;
  width:100%
}
.hero {
  height:407px
}
.hero-copy {
  position:absolute;
  z-index:7;
  left:72px;
  top:20px;
  width:385px
}
.hero-crown {
  position:absolute;
  z-index:10;
  top:-23px;
  left:-34px;
  width:52px;
  height:45px;
  transform:rotate(-9deg);
  fill:none;
  stroke:#111;
  stroke-width:5;
  stroke-linecap:round;
  stroke-linejoin:round
}
.hero h1 {
  position:relative;
  margin:0 0 8px -25px;
  font:400 73px/.94 var(--marker);
  letter-spacing:-.035em;
  white-space:nowrap
}
.brush {
  position:relative;
  z-index:0;
  display:table;
  white-space:nowrap
}
.brush::before {
  content:'';
  position:absolute;
  z-index:-1;
  inset:-9px -12px -6px -15px;
  background-size:100% 100%;
  background-position:center;
  background-repeat:no-repeat
}
.brush-yellow::before {
  background-image:url('assets/paper/strip-yellow.svg')
}
.brush-pink::before {
  background-image:url('assets/paper/strip-pink.svg')
}
.brush-blue::before {
  background-image:url('assets/paper/strip-blue.svg')
}
.hero h1 .brush:first-child {
  padding:0 11px 0 10px;
  transform:rotate(-3deg)
}
.hero h1 .brush:nth-child(2) {
  padding:0 8px 0 0;
  transform:rotate(-3deg);
  margin:5px 0 0 -2px
}
.hero-promise {
  margin:13px 0 0 11px;
  font:700 19px/1.08 var(--hand);
  text-transform:uppercase;
  transform:rotate(-3deg)
}
.hero-promise u {
  text-decoration-thickness:2px;
  text-underline-offset:3px
}
.hero-description {
  width:340px;
  margin:14px 0 0 16px;
  font:15px/1.25 var(--sans)
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:45px;
  padding:8px 25px;
  text-align:center;
  transition:transform .2s
}
.button:hover {
  transform:rotate(1deg) translateY(-3px)
}
.hero-cta-wrap {
  position:relative;
  display:table;
  margin:13px 0 0 22px;
  transition:transform .24s var(--ease)
}
.hero-cta-wrap:hover {
  transform:rotate(1deg) translateY(-3px) scale(1.02)
}
.button-black {
  margin:0;
  min-width:280px;
  color:#fff;
  background:url('assets/paper/strip-black.svg') center/100% 100% no-repeat;
  font:700 16px var(--hand);
  transform:rotate(-1deg)
}
.hero-cta-wrap .button-black:hover {
  transform:rotate(-1deg)
}
.button-black span {
  font:700 20px var(--sans)
}
.hero-rays {
  position:absolute;
  left:calc(100% + 8px);
  top:3px;
  width:31px;
  height:40px;
  fill:none;
  stroke:#111;
  stroke-width:3.5;
  stroke-linecap:round
}

.hero-collage {
  position:absolute;
  z-index:2;
  top:-15px;
  left:438px;
  width:500px;
  height:393px
}
.hero-photo {
  position:absolute;
  padding:7px;
  background:#fffdf6;
  filter:drop-shadow(3px 5px 2px rgba(40,24,8,.19));
  clip-path:polygon(0 2%,5% 0,13% 1%,21% 0,31% 1%,41% 0,51% 1%,62% 0,74% 1%,85% 0,96% 1%,100% 3%,99% 12%,100% 25%,99% 38%,100% 52%,99% 66%,100% 79%,98% 91%,95% 99%,83% 98%,72% 100%,60% 98%,47% 100%,34% 98%,21% 100%,9% 98%,2% 100%,0 94%,1% 80%,0 67%,1% 52%,0 35%,1% 20%)
}
.hero-photo img {
  width:100%;
  height:100%;
  object-fit:cover;
  clip-path:polygon(0 1%,99% 0,100% 98%,1% 100%)
}
.hero-photo-day {
  top:1px;
  left:7px;
  width:247px;
  height:330px;
  transform:rotate(-3deg)
}
.hero-photo-day img {
  object-position:34% center
}
.hero-photo-studio {
  top:22px;
  left:222px;
  width:225px;
  height:319px;
  transform:rotate(5deg)
}
.hero-photo-studio img {
  object-position:65% 42%
}
.daylight-brand {
  position:absolute;
  z-index:2;
  top:145px;
  left:58px;
  color:#eee;
  font:700 20px/.75 var(--hand);
  letter-spacing:-.05em;
  transform:rotate(7deg);
  text-shadow:0 1px 2px #222
}
.hero-camera {
  position:absolute;
  z-index:6;
  top:83px;
  left:102px;
  width:340px;
  height:285px;
  object-fit:contain;
  filter:drop-shadow(6px 9px 6px rgba(0,0,0,.22))
}
.tape {
  position:absolute;
  z-index:8;
  width:74px;
  height:24px;
  background-size:100% 100%;
  background-repeat:no-repeat;
  opacity:.94
}
.tape-pink {
  background-image:url('assets/paper/tape-pink.svg')
}
.tape-blue {
  background-image:url('assets/paper/tape-blue.svg')
}
.tape-green {
  background-image:url('assets/paper/tape-green.svg')
}
.tape-yellow {
  background-image:url('assets/paper/tape-yellow.svg')
}
.tape-black {
  background-image:url('assets/paper/strip-black.svg')
}
.hero-tape {
  top:-22px;
  left:132px;
  width:92px;
  height:28px;
  transform:rotate(-7deg)
}
.paper {
  position:absolute;
  z-index:7;
  display:block;
  background-repeat:no-repeat;
  background-size:100% 100%;
  filter:drop-shadow(2px 4px 2px rgba(45,28,8,.17))
}
.paper-cream,.paper-white {
  background-image:url('assets/paper/strip-cream.svg')
}
.paper-yellow {
  background-image:url('assets/paper/strip-yellow.svg')
}
.hero-list {
  top:24px;
  right:12px;
  width:100px;
  height:173px;
  padding:23px 15px;
  font:700 15px/1.42 var(--hand);
  transform:rotate(4deg)
}
.hero-sticker {
  right:6px;
  bottom:3px;
  width:130px;
  height:140px;
  padding:28px 23px;
  font:700 21px/.98 var(--hand);
  transform:rotate(-11deg)
}
.hero-caption {
  left:29px;
  bottom:8px;
  width:113px;
  height:104px;
  padding:19px 16px;
  font:700 15px/1 var(--hand);
  transform:rotate(-11deg)
}
.blue-star {
  position:absolute;
  z-index:7;
  bottom:16px;
  left:123px;
  width:80px;
  height:80px;
  fill:none;
  stroke:#2a7ee9;
  stroke-width:14;
  stroke-linecap:round;
  stroke-linejoin:round;
  transform:rotate(-9deg);
  filter:drop-shadow(2px 3px rgba(0,0,0,.15))
}
.hero-arrow {
  position:absolute;
  z-index:8;
  left:-11px;
  bottom:73px;
  width:54px;
  height:66px;
  fill:none;
  stroke:#f6539d;
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
  transform:rotate(5deg)
}
.hero-smile {
  position:absolute;
  z-index:8;
  right:-2px;
  top:180px;
  width:37px;
  height:37px;
  fill:none;
  stroke:#111;
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
  transform:rotate(9deg)
}
.hero-tick {
  position:absolute;
  z-index:8;
  right:-3px;
  bottom:75px;
  color:#f1539d;
  font:700 44px var(--hand);
  transform:rotate(-23deg)
}

.process {
  margin-top:var(--section-gap);
  height:554px
}
.section-heading {
  position:absolute;
  inset:0 auto auto 0;
  width:100%;
  height:77px
}
.process-heading h2 {
  position:absolute;
  top:6px;
  left:47px;
  margin:0;
  padding:3px 12px 0;
  font:400 54px/.93 var(--marker);
  letter-spacing:-.035em;
  transform:rotate(-2deg)
}
.process-intro {
  position:absolute;
  top:6px;
  left:409px;
  margin:0;
  font:700 19px/1.1 var(--hand);
  text-transform:uppercase;
  transform:rotate(-5deg)
}
.process-intro-arrow {
  position:absolute;
  top:4px;
  left:154px;
  width:77px;
  height:55px;
  fill:none;
  stroke:#111;
  stroke-width:3.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  transform:rotate(4deg)
}
.process-grid {
  position:absolute;
  inset:0
}
.process-card {
  position:absolute;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:36px 26px 17px;
  text-align:center;
  background-size:100% 100%;
  background-repeat:no-repeat;
  filter:drop-shadow(2px 6px 3px rgba(34,25,12,.12));
  transition:transform .25s
}
.process-card:hover {
  transform:rotate(2deg) translateY(-4px)
}
.process-pink {
  top:80px;
  left:74px;
  width:253px;
  height:246px;
  background-image:url('assets/paper/circle-pink.svg');
  transform:rotate(-3deg)
}
.process-yellow {
  top:55px;
  left:342px;
  width:263px;
  height:259px;
  background-image:url('assets/paper/circle-yellow.svg');
  transform:rotate(2deg)
}
.process-blue {
  top:54px;
  left:607px;
  width:275px;
  height:256px;
  background-image:url('assets/paper/circle-blue.svg');
  transform:rotate(-3deg)
}
.process-green {
  top:298px;
  left:200px;
  width:271px;
  height:247px;
  background-image:url('assets/paper/circle-green.svg');
  transform:rotate(2deg)
}
.process-orange {
  top:292px;
  left:490px;
  width:280px;
  height:258px;
  background-image:url('assets/paper/circle-orange.svg');
  transform:rotate(-1deg)
}
.step-number {
  position:absolute;
  top:13px;
  left:12px;
  width:47px;
  height:47px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#0d0e0e;
  color:#fff;
  font:700 31px/1 var(--hand);
  transform:rotate(2deg)
}
.step-icon {
  width:49px;
  height:49px;
  margin:0 auto 7px;
  fill:none;
  stroke:#111;
  stroke-width:3.2;
  stroke-linejoin:round;
  stroke-linecap:round;
  flex:0 0 auto
}
.process-card h3 {
  margin:0;
  font:700 22px/.9 var(--hand);
  text-transform:uppercase
}
.process-card p {
  max-width:190px;
  margin:9px auto 0;
  font:14px/1.19 var(--sans)
}
.process-card:nth-of-type(4) {
  padding-top:38px
}
.process-card:nth-of-type(5) {
  padding-top:37px
}
.process-card:nth-of-type(5) h3 {
  font-size:21px
}
.process-card:nth-of-type(5) p {
  max-width:197px
}
.flow-arrow {
  position:absolute;
  z-index:9;
  width:75px;
  height:54px;
  fill:none;
  stroke:#141412;
  stroke-width:3.5;
  stroke-linecap:round;
  stroke-linejoin:round
}
.flow-one {
  top:79px;
  left:289px;
  width:59px;
  transform:rotate(-5deg)
}
.flow-two {
  top:85px;
  left:561px;
  width:57px;
  transform:rotate(4deg)
}
.flow-three {
  top:296px;
  left:134px;
  width:60px;
  transform:rotate(52deg)
}
.flow-four {
  top:335px;
  left:442px;
  width:65px;
  transform:rotate(-8deg)
}
.process-aside {
  position:absolute;
  right:25px;
  top:358px;
  width:132px;
  font:700 17px/1.07 var(--hand);
  text-transform:uppercase;
  transform:rotate(-8deg)
}
.process-aside:after {
  content:'';
  position:absolute;
  bottom:-5px;
  left:0;
  width:96px;
  border-bottom:3px solid #ed5c9c;
  transform:rotate(-4deg)
}
.process-aside svg {
  position:absolute;
  right:-4px;
  bottom:-22px;
  width:37px;
  height:37px;
  margin:0;
  fill:none;
  stroke:#111;
  stroke-width:3
}
.doodle-star {
  position:absolute;
  fill:none;
  stroke:#f3559b;
  stroke-width:4;
  stroke-linejoin:round
}
.process-star {
  top:79px;
  right:25px;
  width:55px;
  height:55px;
  transform:rotate(-13deg)
}
.process-sparks,.process-scissors,.process-crown {
  position:absolute;
  z-index:4;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round
}
.process-sparks {
  top:132px;
  left:32px;
  width:42px;
  height:65px;
  stroke:#f252a0;
  stroke-width:7
}
.process-scissors {
  top:384px;
  left:134px;
  width:70px;
  height:58px;
  stroke:#111;
  stroke-width:3.8
}
.process-crown {
  top:312px;
  left:766px;
  width:52px;
  height:48px;
  stroke:#111;
  stroke-width:4
}
.services {
  margin-top:var(--section-gap);
  height:362px
}
.services-heading h2 {
  position:absolute;
  top:1px;
  left:50px;
  margin:0;
  padding:4px 13px 2px;
  font:400 51px/1 var(--marker);
  letter-spacing:-.03em;
  transform:rotate(-2deg)
}
.services-heading p {
  position:absolute;
  top:1px;
  left:555px;
  margin:0;
  font:700 17px/1.1 var(--hand);
  text-transform:uppercase;
  transform:rotate(-4deg)
}
.services-heading-arrow {
  position:absolute;
  top:0;
  left:-94px;
  width:81px;
  height:58px;
  fill:none;
  stroke:#111;
  stroke-width:3.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  transform:rotate(-7deg)
}
.service-grid {
  position:absolute;
  inset:82px 21px auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px
}
.service-card {
  position:relative;
  height:210px;
  padding:46px 20px 16px;
  background-size:100% 100%;
  background-repeat:no-repeat;
  text-align:center;
  filter:drop-shadow(2px 5px 3px rgba(32,20,10,.16))
}
.service-card:nth-child(1) {
  background-image:url('assets/paper/service-card-1.svg');
  transform:rotate(-2deg)
}
.service-card:nth-child(2) {
  background-image:url('assets/paper/service-card-2.svg');
  transform:rotate(1deg)
}
.service-card:nth-child(3) {
  background-image:url('assets/paper/service-card-3.svg');
  transform:rotate(-1deg)
}
.service-card>.tape {
  top:-8px;
  left:calc(50% - 43px);
  width:86px;
  height:40px
}
.service-icon {
  position:absolute;
  top:-3px;
  left:calc(50% - 26px);
  width:52px;
  height:51px;
  display:grid;
  place-items:center;
  background-size:100% 100%
}
.tile-green {
  background-image:url('assets/paper/tape-green.svg')
}
.tile-pink {
  background-image:url('assets/paper/tape-pink.svg')
}
.tile-blue {
  background-image:url('assets/paper/tape-blue.svg')
}
.service-icon svg {
  width:43px;
  height:43px;
  fill:none;
  stroke:#111;
  stroke-width:2.8;
  stroke-linecap:round;
  stroke-linejoin:round
}
.service-card h3 {
  margin:3px 0 1px;
  font:700 22px/.92 var(--hand)
}
.service-subtitle {
  display:block;
  font:700 13px/.9 var(--sans)
}
.pink-underline {
  display:block;
  width:78%;
  height:3px;
  margin:3px auto 8px;
  background:#f15b9d;
  transform:rotate(-2deg)
}
.service-card ul {
  max-width:250px;
  margin:0 auto;
  padding:0;
  list-style:none;
  text-align:left;
  font:13px/1.43 var(--sans)
}
.service-card li {
  position:relative;
  padding-left:16px;
  white-space:nowrap
}
.service-card li:before {
  content:'✓';
  position:absolute;
  left:0;
  color:#f14f93;
  font-weight:800
}
.service-ribbon {
  position:absolute;
  bottom:-23px;
  left:26px;
  max-width:230px;
  margin:0;
  padding:4px 11px;
  font:700 16px/.95 var(--hand);
  text-align:left;
  text-transform:uppercase;
  transform:rotate(-2deg);
  white-space:normal
}
.service-ribbon::before {
  inset:-4px -4px -6px -3px
}
.service-card:nth-child(3) .service-ribbon {
  bottom:-35px;
  max-width:225px;
  font-size:15px
}
.service-card:nth-child(3) ul {
  line-height:1.25
}
.service-star {
  position:absolute;
  right:17px;
  top:200px;
  width:43px;
  height:43px;
  fill:none;
  stroke:#111;
  stroke-width:3.6;
  stroke-linejoin:round
}
.service-card > .tape {
  display:none
}
.service-icon {
  z-index:3
}
@media(max-width:760px) {
  .process-sparks,.process-scissors,.process-crown,.service-star {
    display:none
  }
}
@media(min-width:942px) {
  body {
    zoom:min(calc(100vw / 941px),1.5)
  }
}

.results {
  margin-top:55px;
  height:285px
}
.results-heading h2 {
  position:absolute;
  top:3px;
  left:48px;
  margin:0;
  padding:3px 10px 2px;
  font:400 37px/1 var(--marker);
  letter-spacing:-.04em;
  transform:rotate(-3deg)
}
.results-heading p {
  position:absolute;
  top:11px;
  left:500px;
  margin:0;
  font:700 18px/1.07 var(--hand);
  text-transform:uppercase;
  transform:rotate(-7deg)
}
.results-grid {
  position:absolute;
  top:70px;
  left:33px;
  right:27px;
  height:190px;
  display:grid;
  grid-template-columns:236px 236px 1fr;
  gap:12px;
  align-items:start
}
.social-case {
  position:relative;
  height:190px;
  display:flex;
  align-items:center;
  gap:4px
}
.social-case .tape {
  display:none
}
.phone {
  position:relative;
  z-index:3;
  flex:0 0 108px;
  height:180px;
  padding:4px;
  overflow:hidden;
  border:3px solid #101010;
  border-radius:13px;
  background:#111;
  box-shadow:3px 4px 3px rgba(0,0,0,.22)
}
.phone-one {
  transform:rotate(-4deg)
}
.phone-two {
  transform:rotate(3deg)
}
.phone-screen {
  width:100%;
  height:100%;
  overflow:hidden;
  border-radius:8px
}
.phone-screen img {
  width:100%;
  height:100%;
  object-fit:cover
}
.phone-play {
  position:absolute;
  top:48%;
  left:50%;
  width:29px;
  height:29px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#0009;
  color:#fff;
  font-size:11px;
  transform:translate(-50%,-50%)
}
.phone-home {
  position:absolute;
  bottom:4px;
  left:50%;
  width:21px;
  height:3px;
  border-radius:4px;
  background:#eee;
  transform:translateX(-50%)
}
.metrics-list {
  position:relative;
  flex:1;
  min-width:0;
  height:171px;
  padding:13px 7px 8px;
  background:url('assets/paper/service-card-1.svg') center/100% 100% no-repeat;
  transform:rotate(-2deg)
}
.metric {
  display:flex;
  align-items:flex-start;
  gap:5px;
  height:77px
}
.metric+.metric {
  padding-top:5px;
  border-top:1px solid #dcd2c3
}
.social-icon {
  flex:0 0 20px;
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  color:#fff;
  border-radius:5px;
  font:bold 14px var(--sans)
}
.instagram {
  background:linear-gradient(135deg,#7754d1,#ef4b80,#fca148)
}
.youtube {
  background:#eb3042;
  font-size:11px
}
.facebook {
  background:#2b70cf;
  font-size:16px
}
.tiktok {
  color:#111;
  background:transparent;
  font-size:20px;
  text-shadow:-2px 0 #25f4ee,2px 0 #ff0050
}
.metric b {
  display:block;
  font:700 21px/.95 var(--hand);
  white-space:nowrap
}
.metric small {
  display:block;
  margin-top:3px;
  font:12px/1.1 var(--hand)
}
.case-photo {
  position:relative;
  height:190px;
  padding:6px;
  background:#fffdfa;
  clip-path:polygon(0 4%,8% 0,18% 2%,29% 0,42% 2%,55% 0,67% 2%,80% 0,95% 2%,100% 6%,98% 95%,88% 100%,76% 98%,61% 100%,47% 98%,31% 100%,17% 97%,4% 100%,0 94%);
  filter:drop-shadow(3px 5px 3px rgba(0,0,0,.18));
  transform:rotate(-1deg)
}
.case-photo>img {
  width:100%;
  height:100%;
  object-fit:cover;
  clip-path:polygon(0 3%,6% 1%,13% 2%,22% 0,31% 2%,40% 1%,49% 3%,60% 1%,70% 2%,81% 0,91% 2%,100% 1%,99% 93%,92% 95%,83% 94%,74% 98%,65% 96%,57% 99%,47% 96%,37% 99%,29% 96%,20% 98%,10% 95%,1% 97%)
}
.case-location {
  top:0;
  right:1px;
  width:122px;
  height:82px;
  padding:16px 9px;
  font:700 13px/1.02 var(--hand);
  transform:rotate(3deg)
}
.case-benefits {
  position:absolute;
  right:1px;
  bottom:0;
  width:137px;
  height:96px;
  margin:0;
  padding:15px 8px 5px 16px;
  list-style:none;
  background:url('assets/paper/service-card-2.svg') center/100% 100% no-repeat;
  font:700 12px/1.2 var(--hand);
  transform:rotate(-4deg)
}
.case-benefits li:before {
  content:'✓';
  margin-right:3px
}
.case-tape {
  display:none
}
.results-arrow {
  position:absolute;
  top:12px;
  left:435px;
  width:62px;
  fill:none;
  stroke:#111;
  stroke-width:3;
  stroke-linecap:round
}

.closing {
  margin-top:var(--section-gap);
  height:107px
}
.closing-strip {
  position:absolute;
  top:7px;
  left:76px;
  width:792px;
  height:94px;
  padding:12px 35px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:#fff;
  background:url('assets/individual/closing-torn-black.png') center/100% 260% no-repeat;
  transform:rotate(-1deg)
}
.closing-copy {
  width:535px
}
.closing-copy h2 {
  display:table;
  margin:0;
  font:400 30px/1.02 var(--hand);
  white-space:nowrap;
  transform:rotate(-1deg)
}
.closing-copy h2:after {
  content:'';
  display:block;
  width:94%;
  height:3px;
  margin-top:5px;
  background:#f15d9e;
  transform:rotate(0deg)
}
.closing-copy p {
  width:500px;
  margin:10px 0 0 0;
  font:11px/1.22 var(--sans);
  text-align:center
}
.button-yellow {
  flex:0 0 auto;
  min-width:207px;
  min-height:56px;
  margin:0 1px 0 0;
  color:#111;
  background:url('assets/paper/strip-yellow.svg') center/100% 100% no-repeat;
  font:700 20px var(--hand);
  transform:rotate(-3deg)
}
.button-yellow span {
  font:700 25px var(--sans)
}
.closing-star {
  top:-7px;
  left:40px;
  width:49px;
  height:49px;
  transform:rotate(4deg)
}
.closing-smile {
  position:absolute;
  right:25px;
  top:19px;
  width:40px;
  height:40px;
  fill:none;
  stroke:#f958a4;
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
  transform:rotate(-8deg)
}

.clients {
  height:155px;
  padding:24px 50px 0
}
.clients-title {
  display:table;
  margin:0 0 5px;
  padding:0 8px;
  font:700 25px var(--hand);
  background:url('assets/paper/strip-cream.svg') center/100% 100% no-repeat;
  transform:rotate(-1deg)
}
.client-list {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:13px;
  margin:0;
  padding:0;
  list-style:none
}
.client-card {
  height:74px;
  display:grid;
  place-items:center;
  background-size:100% 100%;
  filter:drop-shadow(2px 3px 2px #0002)
}
.client-paper-white {
  background-image:url('assets/paper/strip-cream.svg')
}
.client-paper-yellow {
  background-image:url('assets/paper/strip-yellow.svg')
}
.client-paper-pink {
  background-image:url('assets/paper/strip-pink.svg')
}
.client-paper-blue {
  background-image:url('assets/paper/strip-blue.svg')
}
.client-card:nth-child(odd) {
  transform:rotate(-2deg)
}
.client-card:nth-child(even) {
  transform:rotate(2deg)
}
.client-placeholder {
  font:700 15px var(--hand);
  opacity:.65
}
.client-wide,.client-condensed {
  font:700 11px var(--sans);
  letter-spacing:.1em
}
.site-footer {
  margin-top:65px;
  height:85px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 50px
}
.footer-brand {
  position:static
}
.footer-brand .brand-name {
  font-size:18px
}
.footer-brand .brand-rays {
  width:24px;
  height:28px
}
.footer-line {
  font:700 17px var(--hand)
}
.footer-legal {
  display:flex;
  gap:15px;
  align-items:center;
  font-size:12px
}
.footer-legal a:hover,.footer-legal a:focus-visible {
  text-decoration:underline;
  text-decoration-color:var(--pink);
  text-decoration-thickness:2px;
  text-underline-offset:3px
}
.footer-top,.site-footer small {
  font-size:11px
}

body.js-ready .reveal {
  opacity:0;
  translate:0 22px;
  transition:opacity .7s var(--ease),translate .8s var(--ease);
  transition-delay:var(--reveal-delay,0ms)
}
body.js-ready .reveal.is-visible {
  opacity:1;
  translate:0 0
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  body.js-ready .reveal {
    opacity:1;
    translate:0 0;
    transition:none
  }
  * {
    animation-duration:.01ms!important;
    transition-duration:.01ms!important
  }

}

@media(max-width:760px) {
  :root {
    --section-gap:64px
  }
  .results {
    margin-top:50px
  }
  .site-footer {
    margin-top:45px
  }
  html {
    scroll-padding-top:65px
  }
  body {
    background-size:760px auto
  }
  .site-header {
    height:68px
  }
  .brand {
    top:20px;
    left:24px
  }
  .brand-name {
    font-size:23px
  }
  .brand-rays {
    width:28px
  }
  .menu-toggle {
    position:absolute;
    top:13px;
    right:20px;
    z-index:80;
    width:42px;
    height:42px;
    padding:8px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:6px;
    border:0;
    background:url('assets/paper/strip-yellow.svg') center/100% 100%
  }
  .menu-toggle span {
    height:3px;
    background:#111;
    transition:transform .2s
  }
  .menu-toggle[aria-expanded=true] span:first-child {
    transform:translateY(4.5px) rotate(45deg)
  }
  .menu-toggle[aria-expanded=true] span:last-child {
    transform:translateY(-4.5px) rotate(-45deg)
  }
  .main-nav {
    position:fixed;
    z-index:70;
    inset:0;
    top:0;
    left:0;
    right:0;
    padding:85px 35px 35px;
    display:flex;
    align-items:flex-start;
    justify-content:flex-start;
    flex-direction:column;
    gap:20px;
    background:var(--paper) url('assets/individual/paper-background.png') center/cover;
    opacity:0;
    visibility:hidden;
    transform:translateY(-10px);
    transition:opacity .2s,transform .2s,visibility .2s;
    font-size:25px
  }
  .main-nav.is-open {
    opacity:1;
    visibility:visible;
    transform:translateY(0)
  }
  .main-nav .nav-cta {
    margin:15px 0 0;
    width:215px;
    height:55px;
    font-size:22px
  }
  body.menu-open {
    overflow:hidden
  }
  .hero {
    height:auto;
    min-height:0;
    padding:0 20px 20px
  }
  .hero-copy,.hero-collage {
    position:relative;
    inset:auto;
    width:100%
  }
  .hero-copy {
    height:385px;
    padding-left:4px
  }
  .hero-crown {
    top:13px;
    left:0;
    width:40px
  }
  .hero h1 {
    margin:0;
    padding-top:50px;
    font-size:clamp(50px,10.3vw,78px)
  }
  .hero-promise {
    font-size:clamp(17px,3.2vw,21px);
    margin-top:18px
  }
  .hero-description {
    width:min(100%,350px);
    font-size:14px
  }
  .hero-cta-wrap {
    margin-top:14px
  }
  .hero-cta-wrap .button-black {
    min-width:min(280px,calc(100vw - 90px));
    padding-inline:10px;
    font-size:clamp(12px,3.5vw,16px)
  }
  .hero-rays {
    left:calc(100% + 6px);
    top:4px;
    bottom:auto;
    width:26px
  }
  .hero-collage {
    height:410px;
    margin-top:-15px
  }
  .hero-photo-day {
    left:1%;
    width:52%;
    height:85%
  }
  .hero-photo-studio {
    left:45%;
    width:48%;
    height:82%
  }
  .hero-camera {
    left:19%;
    top:22%;
    width:72%;
    height:63%
  }
  .hero-list {
    top:8%;
    right:0
  }
  .hero-sticker {
    right:0;
    bottom:0
  }
  .hero-caption {
    left:5%;
    bottom:0
  }
  .process {
    height:auto;
    padding:4px 15px 35px
  }
  .process-heading,.services-heading,.results-heading {
    position:relative;
    height:auto;
    min-height:80px
  }
  .process-heading h2,.services-heading h2,.results-heading h2 {
    position:relative;
    top:auto;
    left:auto;
    display:table;
    margin:0;
    font-size:clamp(38px,8vw,52px)
  }
  .process-intro {
    top:45px;
    left:auto;
    right:7%;
    font-size:17px
  }
  .process-intro span {
    right:-35px;
    font-size:43px
  }
  .process-grid {
    position:relative;
    inset:auto;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:2px;
    justify-items:center
  }
  .process-card,.process-card:hover {
    position:relative;
    top:auto;
    left:auto;
    width:min(100%,260px);
    height:auto;
    aspect-ratio:1;
    padding:15% 11% 5%;
    transform:none
  }
  .process-card:nth-of-type(5) {
    grid-column:1/-1
  }
  .step-number {
    top:7%;
    left:7%;
    width:37px;
    height:37px;
    font-size:25px
  }
  .step-icon {
    width:39px;
    height:39px;
    margin-bottom:5px
  }
  .process-card h3 {
    font-size:clamp(15px,3.2vw,21px)
  }
  .process-card p {
    font-size:clamp(10px,1.9vw,13px)
  }
  .flow-arrow {
    display:none
  }
  .process-aside {
    position:relative;
    top:auto;
    right:auto;
    width:190px;
    margin:8px 6% 0 auto;
    font-size:15px
  }
  .process-star {
    top:140px;
    right:12px
  }
  .services {
    height:auto;
    padding:0 15px 30px
  }
  .services-heading p {
    top:54px;
    left:auto;
    right:20px;
    font-size:14px
  }
  .services-heading-arrow {
    display:none
  }
  .service-grid {
    position:relative;
    inset:auto;
    display:grid;
    grid-template-columns:1fr;
    gap:26px;
    width:min(100%,400px);
    margin:5px auto
  }
  .service-card {
    height:255px
  }
  .service-card ul {
    font-size:14px
  }
  .results {
    height:auto;
    padding:0 15px 30px
  }
  .results-heading {
    min-height:74px
  }
  .results-heading h2 {
    font-size:clamp(28px,6vw,39px)
  }
  .results-heading p {
    top:46px;
    left:auto;
    right:25px;
    font-size:14px
  }
  .results-grid {
    position:relative;
    inset:auto;
    height:auto;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px
  }
  .social-case {
    height:170px
  }
  .phone {
    flex-basis:44%;
    min-width:68px;
    height:150px
  }
  .metrics-list {
    height:146px;
    padding:11px 5px
  }
  .metric {
    gap:3px
  }
  .social-icon {
    flex-basis:16px;
    width:16px;
    height:16px;
    font-size:11px
  }
  .metric b {
    font-size:clamp(13px,3vw,19px)
  }
  .metric small {
    font-size:9px
  }
  .case-photo {
    grid-column:1/-1;
    height:195px
  }
  .results-arrow {
    display:none
  }
  .closing {
    height:auto;
    padding:0 17px 12px
  }
  .closing-strip {
    position:relative;
    top:auto;
    left:auto;
    width:100%;
    height:auto;
    min-height:170px;
    padding:20px 24px;
    display:flex;
    flex-direction:column;
    align-items:flex-start
  }
  .closing-copy,.closing-copy p {
    width:100%
  }
  .closing-copy h2 {
    font-size:clamp(20px,5vw,32px);
    white-space:normal
  }
  .closing-copy p {
    margin:12px 0 0;
    font-size:12px;
    text-align:left
  }
  .button-yellow {
    align-self:flex-end;
    min-width:180px
  }
  .closing-star {
    left:4px
  }
  .closing-smile {
    right:8px
  }
  .clients {
    height:auto;
    padding:25px 20px
  }
  .client-list {
    grid-template-columns:repeat(2,1fr)
  }
  .client-card {
    height:70px
  }
  .client-card:last-child {
    grid-column:1/-1;
    width:48%;
    justify-self:center
  }
  .site-footer {
    height:auto;
    min-height:120px;
    padding:12px 20px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px
  }
  .footer-line {
    grid-column:1/-1;
    grid-row:2;
    margin:0
  }
  .footer-legal {
    grid-column:1/-1;
    grid-row:3
  }
  .footer-top {
    text-align:right
  }

}

@media(max-width:420px) {
  .hero-copy {
    height:365px
  }
  .hero h1 {
    font-size:50px
  }
  .hero-promise {
    font-size:16px
  }
  .hero-collage {
    height:310px
  }
  .hero-list {
    width:72px;
    height:138px;
    padding:18px 8px;
    font-size:12px
  }
  .hero-sticker {
    width:100px;
    height:100px;
    padding:19px 12px;
    font-size:17px
  }
  .hero-caption {
    width:93px;
    height:85px;
    padding:15px 11px;
    font-size:12px
  }
  .blue-star {
    width:65px;
    height:65px
  }
  .process-card {
    padding-top:14%
  }
  .process-card p {
    font-size:10px
  }
  .step-icon {
    width:33px;
    height:33px
  }
  .process-card h3 {
    font-size:14px
  }
  .service-card li {
    white-space:normal
  }

}

@media(min-width:761px) {

  body {
    overflow-x:hidden;
    background-image:linear-gradient(rgba(255,255,255,.39),rgba(255,255,255,.39)),url('assets/individual/paper-background.png')
  }

  .hero-copy {
    left:60px;
    top:40px
  }

  .hero-crown {
    left:-20px
  }

  .hero h1 {
    margin-left:6px
  }

  .hero h1 .brush:first-child {
    font-size:83px;
    line-height:.94
  }

  .hero-promise {
    margin-top:17px;
    margin-left:28px
  }

  .hero-description {
    margin-left:29px
  }

  .hero-cta-wrap {
    position:absolute;
    left:37px;
    top:300px;
    margin:0
  }

  .hero-camera {
    top:58px;
    left:122px;
    width:330px
  }

  .hero-photo-day {
    top:-11px
  }

  .hero-photo-studio {
    top:11px;
    left:195px;
    width:245px
  }

  .hero-sticker {
    right:31px;
    bottom:35px
  }

  .hero-caption {
    bottom:34px
  }

  .blue-star {
    bottom:42px
  }

  .hero-smile {
    right:10px
  }

  .process-heading h2 {
    width:322px;
    padding-left:25px;
    padding-right:0;
    font-size:47px;
    line-height:1
  }

  .services-heading h2 {
    font-size:44px
  }

  .results-heading h2 {
    left:56px;
    font-size:37px
  }

  .closing-copy h2 {
    font-size:25px
  }

  .button-yellow {
    margin-right:27px
  }

}