/* =========================================================
   NO BEIGE WEBSITES
   MASTER CSS — FIXED HERO CANVAS VERSION
   ========================================================= */


/* =========================================================
   BRAND
   ========================================================= */

:root {
  --cream: #fff8ed;
  --paper: #fffdf8;

  --black: #0b0b0b;
  --charcoal: #171717;

  --pink: #f52282;
  --teal: #00b9c2;
  --orange: #ff8b32;
  --gold: #c9983b;

  --white: #ffffff;

  --serif: "Playfair Display", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;
  --hand: "Caveat", cursive;
}


/* =========================================================
   RESET
   ========================================================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--cream);
  color: var(--black);
  font-family: var(--sans);
  line-height: 1.55;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}


/* =========================================================
   HEADER
   ========================================================= */

.site-header {
  min-height: 132px;
  padding: 12px 4%;

  display: grid;
  grid-template-columns: 180px 1fr auto;
  align-items: center;
  gap: 34px;

  position: relative;
  z-index: 100;

  background: var(--cream);
}

.site-header::after {
  content: "";

  position: absolute;
  left: 29%;
  right: 6%;
  bottom: 12px;

  height: 2px;
  opacity: .7;

  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 8%,
      var(--black) 8% 11%,
      transparent 11% 19%
    );

  transform: rotate(-.4deg);
}


/* =========================================================
   HEADER LOGO
   ========================================================= */

.header-logo {
  width: 170px;
  height: 105px;

  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.header-logo img {
  width: 155px;
  height: auto;
  object-fit: contain;
}


/* =========================================================
   NAV
   ========================================================= */

.main-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(22px, 2.8vw, 44px);
}

.main-nav a {
  position: relative;

  font-size: .77rem;
  font-weight: 900;
  letter-spacing: .055em;

  white-space: nowrap;
}

.main-nav a::after {
  content: "";

  position: absolute;
  left: 50%;
  bottom: -10px;

  width: 0;
  height: 4px;

  background: var(--pink);

  transform:
    translateX(-50%)
    rotate(-2deg);

  transition: .2s ease;
}

.main-nav a:hover::after,
.main-nav a.active::after {
  width: 105%;
}


/* =========================================================
   HEADER CTA
   ========================================================= */

.header-cta {
  padding: 18px 31px;

  background: var(--pink);
  color: var(--white);

  font-size: .8rem;
  font-weight: 900;
  letter-spacing: .08em;

  box-shadow: 9px 9px 0 var(--black);

  transform: rotate(-1deg);

  transition: .2s ease;
}

.header-cta span {
  margin-left: 12px;
}

.header-cta:hover {
  transform:
    rotate(1deg)
    translate(-2px, -2px);

  box-shadow: 11px 11px 0 var(--teal);
}


/* =========================================================
   HERO
   ========================================================= */

.hero {
  min-height: 850px;

  padding:
    70px
    4.7%
    70px;

  display: grid;
  grid-template-columns: 48% 52%;
  gap: 18px;

  align-items: center;

  position: relative;
  overflow: hidden;

  background:
    radial-gradient(
      circle at 28% 20%,
      #1d1d1d 0%,
      #111111 44%,
      #080808 100%
    );
}


/* =========================================================
   HERO LEFT
   ========================================================= */

.hero-copy-wrap {
  position: relative;
  z-index: 20;
  padding-top: 12px;
}

.hero-eyebrow {
  margin-bottom: 22px;

  color: var(--orange);

  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .15em;

  text-transform: uppercase;
}

.hero-eyebrow span {
  margin: 0 4px;
}


/* =========================================================
   MAIN HERO WORDING
   ========================================================= */

.hero-title {
  color: var(--white);
}

.hero-serif {
  display: block;

  font-family: var(--serif);

  font-size:
    clamp(4rem, 6.1vw, 6.9rem);

  font-weight: 800;

  letter-spacing: -.055em;
  line-height: .78;
}

.hero-website {
  margin-top: 18px;
}


/* =========================================================
   PERSONALITY SIGN
   ========================================================= */

.personality-strip {
  width: 730px;
  max-width: 104%;
  min-height: 118px;

  margin:
    18px
    0
    20px
    -10px;

  padding:
    14px
    28px
    15px;

  display: flex;
  align-items: center;

  position: relative;
  overflow: visible;

  background: var(--black);

  border:
    3px solid
    rgba(255,255,255,.92);

  border-radius:
    15px 24px 13px 20px;

  box-shadow:
    inset 0 0 0 1px
    rgba(255,255,255,.13);

  transform: rotate(.6deg);
}

.personality-strip::after {
  content: "";

  position: absolute;
  left: 8%;
  right: 14%;
  bottom: 8px;

  height: 5px;

  background: var(--gold);

  border-radius:
    80% 10% 70% 15%;

  transform: rotate(-2deg);
}


/* =========================================================
   HAS PERSONALITY
   ========================================================= */

.personality-text {
  position: relative;
  z-index: 8;

  color: var(--pink);

  font-family: var(--hand);

  font-size:
    clamp(4rem, 5.5vw, 6rem);

  font-weight: 700;
  line-height: .82;

  white-space: nowrap;
}


/* =========================================================
   PEEKING FLAMINGO
   LOCKED TO SIGN EDGE
   ========================================================= */

.personality-flamingo {
  width: 265px;
  height: auto;

  position: absolute;

  right: -58px;
  left: auto;
  top: -152px;

  z-index: 20;

  pointer-events: none;
  object-fit: contain;

  filter:
    drop-shadow(
      0 12px 13px
      rgba(0,0,0,.42)
    );

  animation:
    flamingoRise
    1.05s
    cubic-bezier(.22,1.4,.36,1)
    .4s
    both;
}

@keyframes flamingoRise {
  0% {
    transform: translateY(110px);
    opacity: 0;
  }

  65% {
    transform: translateY(-6px);
    opacity: 1;
  }

  82% {
    transform: translateY(3px);
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}


/* =========================================================
   FLAMINGO WHISPER
   LOCKED TO SIGN TOO
   ========================================================= */

.flamingo-whisper {
  position: absolute;

  right: -165px;
  left: auto;
  top: -138px;

  width: 190px;

  z-index: 21;

  color: var(--white);

  font-family: var(--hand);

  font-size: 1.65rem;
  font-weight: 700;
  line-height: .9;

  transform: rotate(-6deg);
}


/* =========================================================
   SHOULD TOO
   ========================================================= */

.hero-should {
  display: block;

  margin-top: 10px;

  color: var(--teal);

  font-family: var(--hand);

  font-size:
    clamp(4rem, 5.8vw, 6.2rem);

  font-weight: 700;
  line-height: .78;

  transform: rotate(-2deg);
}

.hero-should::after {
  content: "";

  display: block;

  width: 66%;
  height: 5px;

  margin-top: 9px;

  background: var(--gold);

  transform: rotate(-3deg);
}


/* =========================================================
   HERO COPY
   ========================================================= */

.hero-punchline {
  margin:
    26px
    0
    10px;

  color: var(--white);

  font-family: var(--hand);

  font-size:
    clamp(1.9rem, 2.4vw, 2.5rem);

  line-height: 1;

  transform: rotate(-1deg);
}

.hero-description {
  max-width: 575px;

  color:
    rgba(255,255,255,.84);

  font-size: 1.05rem;
  line-height: 1.55;

  white-space: pre-line;
}


/* =========================================================
   HERO BUTTONS
   ========================================================= */

.hero-buttons {
  margin-top: 27px;

  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.btn {
  min-height: 53px;

  padding:
    15px
    27px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .07em;

  transition: .2s ease;
}

.btn-pink {
  background: var(--pink);
  color: var(--white);

  box-shadow:
    7px 7px 0
    var(--teal);

  transform: rotate(-1deg);
}

.btn-pink:hover {
  transform:
    rotate(1deg)
    translate(-2px,-2px);

  box-shadow:
    10px 10px 0
    var(--orange);
}

.btn-outline {
  border:
    2px solid
    var(--white);

  color: var(--white);

  box-shadow:
    0 6px 0
    var(--gold);
}


/* =========================================================
   HERO RIGHT
   FIXED INTERNAL CANVAS
   ========================================================= */

.hero-art {
  width: 760px;
  height: 720px;

  position: relative;

  justify-self: center;
  align-self: center;

  isolation: isolate;

  flex-shrink: 0;
}


/* =========================================================
   OUTER PAINT SPLASH
   ========================================================= */

.hero-splash-outer {
  width: 2600px;
  height: 1000px;

  position: absolute;

  left: 54%;
  top: 50%;

  z-index: 1;

  object-fit: fill;

  transform:
    translate(-50%, -50%)
    rotate(4deg);

  opacity: .9;

  pointer-events: none;
}


/* =========================================================
   INNER PAINT SPLASH
   ========================================================= */

.hero-splash-inner {
  width: 1750px;
  height: 750px;

  position: absolute;

  left: 54%;
  top: 50%;

  z-index: 2;

  object-fit: fill;

  transform:
    translate(-50%, -50%)
    rotate(-6deg);

  opacity: .98;

  pointer-events: none;
}


/* =========================================================
   CREAM BADGE
   ========================================================= */

.hero-badge {
  width: 500px;
  height: 500px;

  position: absolute;

  left: 230px;
  top: 110px;

  z-index: 3;

  background: var(--cream);

  border:
    5px solid
    var(--gold);

  border-radius: 50%;

  transform: rotate(-3deg);

  box-shadow:
    0 0 48px
    rgba(255,255,255,.05);
}

.hero-badge-inner {
  position: absolute;

  inset: 11px;

  border:
    2px solid
    rgba(201,152,59,.68);

  border-radius: 50%;

  transform: rotate(7deg);
}


/* =========================================================
   MAIN FLAMINGO
   ========================================================= */

.hero-main-flamingo {
  width: 500px;
  height: auto;

  position: absolute;

  left: -30px;
  top: 80px;

  z-index: 6;

  object-fit: contain;

  pointer-events: none;

  filter:
    drop-shadow(
      0 18px 22px
      rgba(0,0,0,.32)
    );
}


/* =========================================================
   NO
   ========================================================= */

.hero-logo-no {
  position: absolute;

  left: 455px;
  top: 125px;

  z-index: 7;

  color: var(--black);

  font-family: var(--serif);

  font-size: 6rem;
  font-weight: 700;
  line-height: 1;
}


/* =========================================================
   BEIGE WORD
   ========================================================= */

.hero-beige-word {
  width: 455px;
  height: auto;

  position: absolute;

  left: 290px;
  top: 275px;

  z-index: 9;

  transform: rotate(-4deg);

  pointer-events: none;
}


/* =========================================================
   WEBSITES
   ========================================================= */

.hero-logo-websites {
  position: absolute;

  left: 375px;
  top: 470px;

  z-index: 8;

  color: var(--black);

  font-family: var(--serif);

  font-size: 4.6rem;
  font-weight: 700;
  line-height: 1;

  white-space: nowrap;
}

.hero-logo-dot {
  color: var(--pink);
}


/* =========================================================
   BRAND STRIP
   ========================================================= */

.brand-strip {
  overflow: hidden;

  padding:
    13px
    0;

  background: var(--pink);

  color: var(--white);

  border-top:
    4px solid
    var(--black);

  border-bottom:
    4px solid
    var(--black);
}

.brand-strip-track {
  width: max-content;

  white-space: nowrap;

  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .14em;

  animation:
    ticker
    24s
    linear
    infinite;
}

@keyframes ticker {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}


/* =========================================================
   PORTFOLIO
   ========================================================= */

.work-section {
  padding:
    110px
    6%
    125px;

  background: var(--cream);
}

.work-heading {
  max-width: 940px;

  margin-bottom: 60px;
}

.pink-note {
  display: inline-block;

  margin-bottom: 16px;

  padding:
    6px
    15px;

  background: var(--pink);

  font-family: var(--hand);

  font-size: 1.35rem;
  font-weight: 700;

  transform: rotate(-3deg);
}

.work-heading h2 {
  font-family: var(--serif);

  font-size:
    clamp(3rem, 6vw, 6rem);

  line-height: .9;
}

.work-heading h2 span {
  display: block;

  color: var(--pink);

  font-family: var(--hand);

  transform: rotate(-1deg);
}

.work-heading p {
  max-width: 680px;

  margin-top: 25px;
}


/* =========================================================
   PORTFOLIO GRID
   ========================================================= */

.work-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0,1fr));

  gap:
    44px
    38px;
}

.work-card {
  position: relative;

  overflow: hidden;

  background: var(--paper);

  border:
    2px solid
    var(--black);

  border-radius:
    28px 17px 33px 20px;

  box-shadow:
    9px 10px 0
    rgba(13,13,13,.14);

  transform: rotate(-.6deg);

  transition: .25s ease;
}

.work-card:hover {
  transform:
    rotate(0)
    translateY(-7px);

  box-shadow:
    13px 14px 0
    rgba(13,13,13,.16);
}

.work-card-drop {
  margin-top: 35px;

  transform: rotate(.8deg);
}

.work-card::before {
  content: "";

  position: absolute;

  width: 95px;
  height: 25px;

  top: -5px;
  left: 50%;

  z-index: 20;

  background:
    rgba(225,201,151,.83);

  transform:
    translateX(-50%)
    rotate(-4deg);
}

.work-card-image-wrap {
  height: 270px;

  position: relative;

  overflow: hidden;
}

.work-card-image-wrap img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform .35s ease;
}

.work-card:hover .work-card-image-wrap img {
  transform: scale(1.035);
}

.work-card-image-wrap::after {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      transparent 45%,
      rgba(0,0,0,.7)
    );
}

.work-card-image-wrap span {
  position: absolute;

  left: 22px;
  bottom: 18px;

  z-index: 5;

  padding:
    7px
    10px;

  background:
    rgba(13,13,13,.82);

  color: var(--white);

  font-size: .67rem;
  font-weight: 900;

  border-radius: 999px;
}

.work-card-copy {
  padding:
    29px
    30px
    34px;
}

.work-card-copy h3 {
  margin-bottom: 10px;

  font-family: var(--serif);

  font-size: 2rem;
}

.work-card-copy p {
  color: #3a3a3a;
}

.work-card-copy small {
  display: inline-block;

  margin-top: 20px;

  color: var(--pink);

  font-weight: 900;

  border-bottom:
    2px solid
    var(--gold);
}


/* =========================================================
   SERVICES
   ========================================================= */

.services-section {
  padding:
    105px
    6%;

  background: var(--black);

  color: var(--white);
}

.services-heading {
  margin-bottom: 55px;
}

.services-heading > p {
  color: var(--orange);

  font-weight: 900;

  letter-spacing: .15em;
}

.services-heading h2 {
  font-family: var(--serif);

  font-size:
    clamp(3rem, 5vw, 5.5rem);

  line-height: .9;
}

.services-heading h2 span {
  color: var(--pink);

  font-family: var(--hand);
}

.services-grid {
  display: grid;

  grid-template-columns:
    repeat(4,1fr);

  gap: 18px;
}

.service-card {
  min-height: 280px;

  padding:
    34px
    27px;

  display: flex;

  flex-direction: column;
  justify-content: space-between;

  border:
    1px solid
    rgba(255,255,255,.18);

  border-radius:
    27px 16px 30px 19px;

  background:
    rgba(255,255,255,.035);

  transition: .25s ease;
}

.service-card:hover {
  transform: translateY(-6px);

  background:
    rgba(255,255,255,.07);
}

.service-number {
  color: var(--orange);

  font-family: var(--hand);

  font-size: 1.4rem;
}

.service-card h3 {
  font-family: var(--hand);

  font-size: 3.2rem;
}

.service-card:nth-child(1) h3 {
  color: var(--pink);
}

.service-card:nth-child(2) h3 {
  color: var(--orange);
}

.service-card:nth-child(3) h3 {
  color: var(--teal);
}

.service-card:nth-child(4) h3 {
  color: var(--pink);
}

.service-card p {
  color:
    rgba(255,255,255,.75);
}

.service-card small {
  font-weight: 900;

  letter-spacing: .1em;
}


/* =========================================================
   FINAL CTA
   ========================================================= */

.home-cta {
  min-height: 520px;

  padding:
    100px
    7%;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  text-align: center;

  background: var(--cream);
}

.home-cta > p:first-child {
  color: var(--teal);

  font-weight: 900;
  letter-spacing: .16em;
}

.home-cta h2 {
  font-family: var(--serif);

  font-size:
    clamp(3.2rem, 6vw, 6.2rem);

  line-height: .9;
}

.home-cta h2 span {
  display: block;

  color: var(--pink);

  font-family: var(--hand);
}

.home-cta-copy {
  max-width: 650px;

  margin:
    26px
    auto;
}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
  padding:
    34px
    5%;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 25px;

  background: var(--black);

  color: var(--white);
}

.site-footer strong {
  font-family: var(--serif);
}

.site-footer span {
  color:
    rgba(255,255,255,.65);

  font-size: .76rem;
}


/* =========================================================
   TABLET / SMALL LAPTOP
   ========================================================= */

@media (max-width: 1000px) {

  .site-header {
    grid-template-columns:
      140px
      1fr
      auto;

    gap: 18px;
  }

  .header-logo {
    width: 140px;
  }

  .header-logo img {
    width: 125px;
  }

  .main-nav {
    gap: 16px;
  }

  .main-nav a {
    font-size: .64rem;
  }

  .hero {
    grid-template-columns: 1fr;
  }

  .hero-copy-wrap {
    max-width: 700px;
  }

  .personality-flamingo {
    right: -42px;
  }

  .flamingo-whisper {
    right: -145px;
  }

  .hero-art {
    width: 680px;
    height: 650px;

    min-height: 650px;
  }

  .hero-splash-outer {
    width: 1500px;
    height: 720px;

    left: -400px;
    top: -35px;
  }

  .hero-splash-inner {
    width: 1100px;
    height: 580px;

    left: -220px;
    top: 30px;
  }

  .hero-badge {
    width: 460px;
    height: 460px;

    left: 185px;
    top: 95px;
  }

  .hero-main-flamingo {
    width: 450px;

    left: -15px;
    top: 85px;
  }

  .hero-logo-no {
    left: 395px;
    top: 115px;

    font-size: 5.2rem;
  }

  .hero-beige-word {
    width: 390px;

    left: 250px;
    top: 245px;
  }

  .hero-logo-websites {
    left: 325px;
    top: 435px;

    font-size: 4rem;
  }

  .services-grid {
    grid-template-columns:
      repeat(2,1fr);
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

  .site-header {
    min-height: 88px;

    display: flex;
    justify-content: space-between;

    padding:
      10px
      4%;
  }

  .site-header::after {
    display: none;
  }

  .header-logo {
    width: 120px;
    height: 70px;
  }

  .header-logo img {
    width: 110px;
  }

  .main-nav {
    display: none;
  }

  .header-cta {
    padding:
      11px
      15px;

    font-size: .65rem;
  }

  .hero {
    min-height: auto;

    padding:
      55px
      5%
      65px;
  }

  .hero-serif {
    font-size:
      clamp(3.3rem, 16vw, 5rem);
  }

  .personality-strip {
    width: 100%;
    max-width: 100%;
    min-height: 90px;

    margin-left: 0;
  }

  .personality-text {
    font-size:
      clamp(3rem, 14vw, 4.5rem);
  }

  .personality-flamingo {
    width: 170px;

    right: -20px;
    top: -105px;
  }

  .flamingo-whisper {
    display: none;
  }

  .hero-should {
    font-size:
      clamp(3rem, 14vw, 4.8rem);
  }

  .hero-art {
    width: 430px;
    height: 500px;

    min-height: 500px;
  }

  .hero-splash-outer {
    width: 800px;
    height: 430px;

    left: -185px;
    top: 30px;
  }

  .hero-splash-inner {
    width: 620px;
    height: 360px;

    left: -90px;
    top: 70px;
  }

  .hero-badge {
    width: 325px;
    height: 325px;

    left: 90px;
    top: 90px;
  }

  .hero-main-flamingo {
    width: 300px;

    left: -25px;
    top: 100px;
  }

  .hero-logo-no {
    left: 260px;
    top: 105px;

    font-size: 4rem;
  }

  .hero-beige-word {
    width: 285px;

    left: 150px;
    top: 205px;
  }

  .hero-logo-websites {
    left: 175px;
    top: 345px;

    font-size: 2.65rem;
  }

  .work-grid {
    grid-template-columns: 1fr;
  }

  .work-card-drop {
    margin-top: 0;
  }

  .services-grid {
    grid-template-columns: 1fr;
  }

  .site-footer {
    flex-direction: column;
    align-items: flex-start;
  }

}

/* =========================================================
   SERVICES PAGE
   ========================================================= */


/* =========================================================
   SERVICES PAGE HERO
   ========================================================= */

.services-page-hero {
  min-height: 680px;

  padding:
    90px
    6%;

  display: grid;
  grid-template-columns: 58% 42%;

  align-items: center;

  position: relative;
  overflow: hidden;

  background:
    radial-gradient(
      circle at 20% 20%,
      #222222,
      #111111 48%,
      #080808 100%
    );

  color: var(--white);
}


.services-page-copy {
  max-width: 800px;

  position: relative;
  z-index: 10;
}


.services-page-eyebrow {
  margin-bottom: 24px;

  color: var(--orange);

  font-size: .78rem;
  font-weight: 900;

  letter-spacing: .15em;
}


.services-page-eyebrow span {
  margin: 0 5px;
}


.services-page-copy h1 {
  font-family: var(--serif);

  font-size:
    clamp(4rem, 7vw, 7.5rem);

  line-height: .82;

  letter-spacing: -.05em;
}


.services-page-copy h1 span {
  display: block;

  color: var(--pink);

  font-family: var(--hand);

  font-size: .9em;

  transform: rotate(-2deg);
}


.services-page-intro {
  max-width: 650px;

  margin-top: 30px;

  color:
    rgba(255,255,255,.82);

  font-size: 1.08rem;

  white-space: pre-line;
}


.services-page-hand {
  margin-top: 30px;

  color: var(--teal);

  font-family: var(--hand);

  font-size:
    clamp(2rem, 3vw, 3rem);

  transform: rotate(-2deg);
}


/* =========================================================
   SERVICES HERO ART
   ========================================================= */

.services-page-art {
  min-height: 520px;

  position: relative;
}


.services-paint {
  position: absolute;

  border-radius: 50%;

  filter: blur(1px);
}


.services-paint-one {
  width: 360px;
  height: 360px;

  right: 2%;
  top: 8%;

  background:
    radial-gradient(
      circle at 30% 30%,
      var(--pink),
      var(--orange) 35%,
      var(--teal) 70%,
      transparent 72%
    );

  transform: rotate(12deg);
}


.services-paint-two {
  width: 280px;
  height: 280px;

  right: 20%;
  bottom: 2%;

  background:
    radial-gradient(
      circle,
      var(--teal),
      var(--pink) 55%,
      transparent 70%
    );

  opacity: .8;
}


.services-note-card {
  width: 330px;

  padding:
    38px
    30px;

  position: absolute;

  right: 11%;
  top: 25%;

  z-index: 5;

  background: var(--cream);

  color: var(--black);

  border:
    4px solid
    var(--gold);

  border-radius:
    25px 16px 30px 18px;

  box-shadow:
    14px 14px 0
    rgba(245,34,130,.75);

  transform: rotate(5deg);
}


.services-note-card span {
  display: block;

  font-family: var(--serif);

  font-size: 4rem;

  line-height: .9;
}


.services-note-card strong {
  display: block;

  margin-top: 10px;

  font-size: 1.15rem;

  letter-spacing: .08em;
}


.services-note-card em {
  display: block;

  margin-top: 10px;

  color: var(--pink);

  font-family: var(--hand);

  font-size: 3rem;

  font-style: normal;
}


/* =========================================================
   SERVICE FEATURE SECTIONS
   ========================================================= */

.service-feature {
  min-height: 650px;

  padding:
    100px
    7%;

  display: grid;

  grid-template-columns:
    110px
    minmax(0,1fr);

  gap: 45px;

  align-items: start;

  position: relative;

  overflow: hidden;
}


.service-feature-number {
  color: var(--pink);

  font-family: var(--hand);

  font-size: 5rem;

  line-height: 1;
}


.service-feature-copy {
  max-width: 1000px;
}


.service-kicker {
  margin-bottom: 14px;

  color: var(--orange);

  font-size: .75rem;
  font-weight: 900;

  letter-spacing: .14em;
}


.service-feature h2 {
  margin-bottom: 24px;

  font-family: var(--serif);

  font-size:
    clamp(3.3rem, 6vw, 6rem);

  line-height: .88;
}


.service-feature h2 span {
  display: block;

  color: var(--pink);

  font-family: var(--hand);
}


.service-feature-copy > p {
  max-width: 760px;

  font-size: 1.08rem;

  white-space: pre-line;
}


/* light section */

.service-feature-light {
  background: var(--cream);
}


/* dark section */

.service-feature-dark {
  background: var(--black);

  color: var(--white);
}


.service-feature-dark .service-feature-copy > p {
  color:
    rgba(255,255,255,.8);
}


/* =========================================================
   MINI SERVICE GRID
   ========================================================= */

.service-mini-grid {
  margin-top: 45px;

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0,1fr));

  gap: 22px;
}


.service-mini-card {
  min-height: 160px;

  padding:
    25px;

  background: var(--paper);

  border:
    2px solid
    var(--black);

  border-radius:
    22px 14px 28px 17px;

  box-shadow:
    7px 8px 0
    rgba(13,13,13,.12);
}


.service-mini-card strong {
  display: block;

  margin-bottom: 10px;

  color: var(--pink);

  font-size: .82rem;

  letter-spacing: .1em;
}


/* =========================================================
   DARK SERVICE LIST
   ========================================================= */

.service-list-block {
  max-width: 860px;

  margin-top: 45px;

  display: flex;

  flex-wrap: wrap;

  gap: 14px;
}


.service-list-block span {
  padding:
    12px
    17px;

  border:
    2px solid
    var(--white);

  border-radius: 999px;

  font-size: .72rem;
  font-weight: 900;

  letter-spacing: .08em;
}


.service-list-block span:nth-child(2n) {
  border-color: var(--pink);

  color: var(--pink);
}


.service-list-block span:nth-child(3n) {
  border-color: var(--teal);

  color: var(--teal);
}


.service-feature-quote {
  max-width: 420px;

  margin-top: 50px;

  grid-column: 2;

  padding:
    30px;

  border-left:
    6px solid
    var(--gold);

  color: var(--white);

  font-family: var(--hand);

  font-size: 2rem;

  transform: rotate(-2deg);
}


/* =========================================================
   RESCUE SECTION
   ========================================================= */

.service-feature-rescue {
  background:
    linear-gradient(
      135deg,
      #fff8ed 0%,
      #fff8ed 55%,
      #ffd8e8 100%
    );
}


.rescue-before-after {
  margin-top: 50px;

  display: grid;

  grid-template-columns:
    1fr
    80px
    1fr;

  gap: 22px;

  align-items: center;
}


.rescue-box {
  min-height: 220px;

  padding:
    28px;

  border-radius:
    28px 16px 30px 18px;
}


.rescue-box small {
  display: block;

  margin-bottom: 12px;

  font-weight: 900;

  letter-spacing: .12em;
}


.rescue-box strong {
  display: block;

  margin-bottom: 12px;

  font-family: var(--serif);

  font-size: 2rem;
}


.rescue-before {
  background: var(--black);

  color: var(--white);

  transform: rotate(-2deg);
}


.rescue-after {
  background: var(--teal);

  color: var(--black);

  transform: rotate(2deg);
}


.rescue-arrow {
  color: var(--pink);

  font-family: var(--hand);

  font-size: 5rem;

  text-align: center;
}


/* =========================================================
   SUPPORT SECTION
   ========================================================= */

.service-feature-support {
  background: var(--paper);
}


.support-stickers {
  margin-top: 45px;

  display: flex;

  flex-wrap: wrap;

  gap: 16px;
}


.support-stickers span {
  padding:
    13px
    18px;

  background: var(--pink);

  color: var(--white);

  font-size: .74rem;
  font-weight: 900;

  letter-spacing: .08em;

  transform: rotate(-2deg);
}


.support-stickers span:nth-child(2n) {
  background: var(--teal);

  color: var(--black);

  transform: rotate(2deg);
}


.support-stickers span:nth-child(3n) {
  background: var(--orange);
}


/* =========================================================
   WHAT YOU PAY FOR
   ========================================================= */

.not-included-section {
  padding:
    100px
    7%
    110px;

  background: var(--black);

  color: var(--white);
}


.not-included-heading p {
  color: var(--orange);

  font-size: .75rem;
  font-weight: 900;

  letter-spacing: .15em;
}


.not-included-heading h2 {
  font-family: var(--serif);

  font-size:
    clamp(3rem, 6vw, 6rem);

  line-height: .88;
}


.not-included-heading h2 span {
  display: block;

  color: var(--pink);

  font-family: var(--hand);
}


.not-included-grid {
  margin-top: 55px;

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0,1fr));

  gap: 30px;
}


.included-card,
.third-party-card {
  min-height: 260px;

  padding:
    35px;

  border-radius:
    28px 17px 33px 20px;
}


.included-card {
  background: var(--teal);

  color: var(--black);

  transform: rotate(-1deg);
}


.third-party-card {
  background: var(--cream);

  color: var(--black);

  transform: rotate(1deg);
}


.included-card h3,
.third-party-card h3 {
  margin-bottom: 18px;

  font-family: var(--serif);

  font-size: 2rem;
}


.not-included-note {
  max-width: 900px;

  margin-top: 45px;

  color:
    rgba(255,255,255,.8);
}


/* =========================================================
   SERVICES CTA
   ========================================================= */

.services-bottom-cta {
  min-height: 520px;

  padding:
    100px
    7%;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

  background: var(--cream);
}


.services-bottom-cta > p:first-child {
  color: var(--teal);

  font-weight: 900;

  letter-spacing: .15em;
}


.services-bottom-cta h2 {
  margin:
    12px
    0
    24px;

  font-family: var(--serif);

  font-size:
    clamp(3.3rem, 6vw, 6.2rem);

  line-height: .88;
}


.services-bottom-cta h2 span {
  display: block;

  color: var(--pink);

  font-family: var(--hand);
}


.services-bottom-cta > p:not(:first-child) {
  max-width: 600px;

  margin-bottom: 30px;
}


/* =========================================================
   SERVICES RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

  .services-page-hero {
    grid-template-columns: 1fr;
  }


  .services-page-art {
    min-height: 430px;
  }


  .service-feature {
    grid-template-columns: 70px 1fr;
  }


  .service-mini-grid {
    grid-template-columns: 1fr;
  }


  .rescue-before-after {
    grid-template-columns: 1fr;
  }


  .rescue-arrow {
    transform: rotate(90deg);
  }


  .not-included-grid {
    grid-template-columns: 1fr;
  }

}


@media (max-width: 650px) {

  .services-page-hero {
    padding:
      70px
      5%;
  }


  .services-page-copy h1 {
    font-size: 4rem;
  }


  .services-note-card {
    width: 280px;

    right: 5%;
  }


  .service-feature {
    padding:
      75px
      5%;

    grid-template-columns: 1fr;
  }


  .service-feature-number {
    font-size: 3.5rem;
  }


  .service-feature-quote {
    grid-column: 1;

    margin-top: 35px;
  }


  .not-included-section,
  .services-bottom-cta {
    padding:
      80px
      5%;
  }

}

/* =========================================================
   WORK PAGE
   ========================================================= */


/* =========================================================
   WORK HERO
   ========================================================= */

.work-page-hero {
  min-height: 650px;

  padding:
    90px
    6%;

  display: grid;

  grid-template-columns:
    60%
    40%;

  align-items: center;

  position: relative;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 20% 20%,
      #222222,
      #111111 48%,
      #080808 100%
    );

  color: var(--white);
}


.work-page-hero-copy {
  max-width: 850px;

  position: relative;

  z-index: 10;
}


.work-page-eyebrow {
  margin-bottom: 22px;

  color: var(--orange);

  font-size: .78rem;
  font-weight: 900;

  letter-spacing: .15em;
}


.work-page-eyebrow span {
  margin: 0 5px;
}


.work-page-hero h1 {
  font-family: var(--serif);

  font-size:
    clamp(4rem, 7vw, 7.3rem);

  line-height: .84;

  letter-spacing: -.05em;
}


.work-page-hero h1 span {
  display: block;

  color: var(--pink);

  font-family: var(--hand);

  transform: rotate(-2deg);
}


.work-page-intro {
  max-width: 680px;

  margin-top: 30px;

  color:
    rgba(255,255,255,.82);

  font-size: 1.08rem;

  white-space: pre-line;
}


/* =========================================================
   WORK HERO ART
   ========================================================= */

.work-page-hero-art {
  min-height: 450px;

  position: relative;
}


.work-scribble-card {
  width: 330px;

  padding:
    38px
    30px;

  position: absolute;

  right: 10%;
  top: 22%;

  background: var(--cream);

  color: var(--black);

  border:
    4px solid
    var(--gold);

  border-radius:
    28px 17px 33px 20px;

  box-shadow:
    14px 14px 0
    var(--pink);

  transform: rotate(5deg);
}


.work-scribble-card strong {
  display: block;

  margin-bottom: 18px;

  font-size: .85rem;

  letter-spacing: .12em;
}


.work-scribble-card span {
  display: block;

  font-family: var(--serif);

  font-size: 2.1rem;

  line-height: 1;
}


.work-scribble-card em {
  display: block;

  margin-top: 10px;

  color: var(--teal);

  font-family: var(--hand);

  font-size: 2.8rem;

  font-style: normal;

  line-height: .9;
}


/* =========================================================
   PROJECT CASES
   ========================================================= */

.project-case {
  padding:
    100px
    7%
    115px;

  position: relative;

  overflow: hidden;
}


.project-case-dark {
  background: var(--black);

  color: var(--white);
}


.project-case-light {
  background: var(--cream);

  color: var(--black);
}


.project-case-pink {
  background:
    linear-gradient(
      135deg,
      #fff8ed 0%,
      #ffd4e5 100%
    );

  color: var(--black);
}


.project-case-teal {
  background:
    linear-gradient(
      135deg,
      #e8fbfb 0%,
      #fff8ed 72%
    );

  color: var(--black);
}


/* =========================================================
   CASE HEADINGS
   ========================================================= */

.project-case-head {
  margin-bottom: 60px;

  display: grid;

  grid-template-columns:
    100px
    minmax(0,1fr);

  gap: 30px;

  align-items: start;
}


.project-number {
  color: var(--pink);

  font-family: var(--hand);

  font-size: 5rem;

  line-height: 1;
}


.project-kicker {
  margin-bottom: 12px;

  color: var(--orange);

  font-size: .75rem;
  font-weight: 900;

  letter-spacing: .14em;
}


.project-case h2 {
  font-family: var(--serif);

  font-size:
    clamp(3.3rem, 6vw, 6rem);

  line-height: .87;
}


.project-case h2 span {
  display: block;

  color: var(--pink);

  font-family: var(--hand);
}


/* =========================================================
   PROJECT GRID
   ========================================================= */

.project-case-grid {
  display: grid;

  grid-template-columns:
    45%
    55%;

  gap: 55px;

  align-items: center;
}


.project-case-grid-reverse {
  grid-template-columns:
    55%
    45%;
}


.project-case-grid-reverse .project-case-copy {
  order: 2;
}


.project-case-grid-reverse .project-case-visual {
  order: 1;
}


/* =========================================================
   CASE COPY
   ========================================================= */

.project-case-copy h3 {
  margin:
    0
    0
    10px;

  color: var(--pink);

  font-size: .8rem;
  font-weight: 900;

  letter-spacing: .13em;
}


.project-case-copy h3:not(:first-child) {
  margin-top: 34px;
}


.project-case-copy p {
  max-width: 620px;

  font-size: 1.05rem;

  line-height: 1.65;

  white-space: pre-line;
}


.project-case-dark .project-case-copy p {
  color:
    rgba(255,255,255,.8);
}


/* =========================================================
   PROJECT TAGS
   ========================================================= */

.project-tags {
  margin-top: 35px;

  display: flex;

  flex-wrap: wrap;

  gap: 12px;
}


.project-tags span {
  padding:
    10px
    14px;

  border:
    2px solid
    currentColor;

  border-radius: 999px;

  font-size: .67rem;
  font-weight: 900;

  letter-spacing: .09em;
}


.project-tags span:nth-child(2n) {
  color: var(--pink);
}


.project-tags span:nth-child(3n) {
  color: var(--teal);
}


/* =========================================================
   PROJECT VISUAL
   ========================================================= */

.project-case-visual {
  position: relative;

  padding: 18px;

  background: var(--paper);

  border:
    3px solid
    var(--black);

  border-radius:
    28px 17px 34px 20px;

  box-shadow:
    13px 14px 0
    rgba(13,13,13,.16);

  transform: rotate(1deg);
}


.project-case-dark .project-case-visual {
  border-color: var(--white);

  box-shadow:
    13px 14px 0
    var(--pink);
}


.project-case-visual::before {
  content: "";

  position: absolute;

  width: 110px;
  height: 28px;

  left: 50%;
  top: -12px;

  background:
    rgba(229,205,153,.85);

  transform:
    translateX(-50%)
    rotate(-4deg);

  z-index: 10;
}


.project-case-visual img {
  width: 100%;
  height: auto;

  border-radius:
    18px 12px 22px 14px;
}


/* =========================================================
   HFS LITTLE NOTE
   ========================================================= */

.project-before-note {
  width: fit-content;

  margin:
    70px
    0
    0
    auto;

  padding:
    18px
    24px;

  background: var(--black);

  color: var(--white);

  transform: rotate(-2deg);

  box-shadow:
    8px 8px 0
    var(--teal);
}


.project-before-note strong,
.project-before-note span {
  display: block;
}


.project-before-note span {
  margin-top: 5px;

  color: var(--pink);

  font-family: var(--hand);

  font-size: 1.8rem;
}


/* =========================================================
   WORK POINT SECTION
   ========================================================= */

.work-point-section {
  padding:
    110px
    7%;

  background: var(--black);

  color: var(--white);

  text-align: center;
}


.work-point-section > p:first-child {
  color: var(--orange);

  font-size: .76rem;
  font-weight: 900;

  letter-spacing: .15em;
}


.work-point-section h2 {
  margin-top: 12px;

  font-family: var(--serif);

  font-size:
    clamp(3.3rem, 6vw, 6.1rem);

  line-height: .88;
}


.work-point-section h2 span {
  display: block;

  color: var(--pink);

  font-family: var(--hand);
}


.work-point-copy {
  max-width: 720px;

  margin:
    30px
    auto
    0;

  color:
    rgba(255,255,255,.8);

  font-size: 1.05rem;

  white-space: pre-line;
}


/* =========================================================
   WORK CTA
   ========================================================= */

.work-bottom-cta {
  min-height: 500px;

  padding:
    100px
    7%;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

  background: var(--cream);
}


.work-bottom-cta > p {
  color: var(--teal);

  font-size: .76rem;
  font-weight: 900;

  letter-spacing: .15em;
}


.work-bottom-cta h2 {
  margin:
    12px
    0
    32px;

  font-family: var(--serif);

  font-size:
    clamp(3.2rem, 6vw, 6rem);

  line-height: .88;
}


.work-bottom-cta h2 span {
  display: block;

  color: var(--pink);

  font-family: var(--hand);
}


/* =========================================================
   WORK RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

  .work-page-hero {
    grid-template-columns: 1fr;
  }


  .work-page-hero-art {
    min-height: 400px;
  }


  .project-case-grid,
  .project-case-grid-reverse {
    grid-template-columns: 1fr;

    gap: 45px;
  }


  .project-case-grid-reverse .project-case-copy,
  .project-case-grid-reverse .project-case-visual {
    order: initial;
  }


  .project-case-head {
    grid-template-columns:
      75px
      1fr;
  }

}


@media (max-width: 650px) {

  .work-page-hero {
    padding:
      70px
      5%;
  }


  .work-page-hero h1 {
    font-size: 4rem;
  }


  .work-scribble-card {
    width: 280px;

    right: 5%;
  }


  .project-case {
    padding:
      75px
      5%
      85px;
  }


  .project-case-head {
    grid-template-columns: 1fr;

    gap: 15px;
  }


  .project-number {
    font-size: 3.5rem;
  }


  .project-case-visual {
    padding: 12px;
  }


  .work-point-section,
  .work-bottom-cta {
    padding:
      80px
      5%;
  }

}

/* =========================================================
   PRICING PAGE
   ========================================================= */


/* =========================================================
   PRICING HERO
   ========================================================= */

.pricing-page-hero {
  min-height: 650px;

  padding:
    90px
    6%;

  display: grid;

  grid-template-columns:
    60%
    40%;

  align-items: center;

  position: relative;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 20% 20%,
      #222222,
      #111111 48%,
      #080808 100%
    );

  color: var(--white);
}


.pricing-hero-copy {
  max-width: 850px;

  position: relative;

  z-index: 5;
}


.pricing-eyebrow {
  margin-bottom: 22px;

  color: var(--orange);

  font-size: .78rem;
  font-weight: 900;

  letter-spacing: .15em;
}


.pricing-eyebrow span {
  margin: 0 5px;
}


.pricing-page-hero h1 {
  font-family: var(--serif);

  font-size:
    clamp(4rem, 7vw, 7.3rem);

  line-height: .84;

  letter-spacing: -.05em;
}


.pricing-page-hero h1 span {
  display: block;

  color: var(--pink);

  font-family: var(--hand);

  transform: rotate(-2deg);
}


.pricing-intro {
  max-width: 680px;

  margin-top: 30px;

  color:
    rgba(255,255,255,.82);

  font-size: 1.08rem;

  white-space: pre-line;
}


/* =========================================================
   HERO NOTE
   ========================================================= */

.pricing-hero-art {
  min-height: 420px;

  position: relative;
}


.pricing-note {
  width: 315px;

  padding:
    34px
    30px;

  position: absolute;

  right: 10%;
  top: 23%;

  background: var(--cream);

  color: var(--black);

  border:
    4px solid
    var(--gold);

  border-radius:
    27px 17px 31px 19px;

  box-shadow:
    14px 14px 0
    var(--teal);

  transform: rotate(5deg);
}


.pricing-note span {
  display: block;

  font-family: var(--serif);

  font-size: 4rem;

  line-height: .9;
}


.pricing-note strong {
  display: block;

  margin-top: 7px;

  font-size: 1.3rem;

  letter-spacing: .1em;
}


.pricing-note em {
  display: block;

  color: var(--pink);

  font-family: var(--hand);

  font-size: 3rem;

  font-style: normal;

  line-height: .9;
}


/* =========================================================
   PRICING STRIP
   ========================================================= */

.pricing-strip {
  padding:
    16px
    4%;

  overflow: hidden;

  background: var(--teal);

  border-top:
    4px solid
    var(--black);

  border-bottom:
    4px solid
    var(--black);
}


.pricing-strip p {
  font-size: .75rem;
  font-weight: 900;

  letter-spacing: .12em;

  text-align: center;
}


/* =========================================================
   PRICING SECTION HEADINGS
   ========================================================= */

.pricing-section-heading > p {
  color: var(--orange);

  font-size: .75rem;
  font-weight: 900;

  letter-spacing: .15em;
}


.pricing-section-heading h2 {
  font-family: var(--serif);

  font-size:
    clamp(3.2rem, 6vw, 6rem);

  line-height: .88;
}


.pricing-section-heading h2 span {
  display: block;

  color: var(--pink);

  font-family: var(--hand);
}


/* =========================================================
   PACKAGES
   ========================================================= */

.pricing-packages-section {
  padding:
    105px
    6%
    125px;

  background: var(--cream);
}


.pricing-grid {
  margin-top: 65px;

  display: grid;

  grid-template-columns:
    repeat(3, minmax(0,1fr));

  gap: 28px;

  align-items: start;
}


.pricing-card {
  min-height: 700px;

  padding:
    34px
    30px;

  display: flex;

  flex-direction: column;

  position: relative;

  background: var(--paper);

  border:
    3px solid
    var(--black);

  border-radius:
    29px 17px 35px 20px;

  box-shadow:
    10px 11px 0
    rgba(13,13,13,.15);

  transform: rotate(-.6deg);
}


.pricing-card:nth-child(3) {
  transform: rotate(.7deg);
}


.pricing-card-featured {
  margin-top: -20px;

  min-height: 750px;

  background: var(--black);

  color: var(--white);

  border-color: var(--pink);

  box-shadow:
    12px 13px 0
    var(--teal);

  transform: rotate(.4deg);
}


.pricing-popular {
  position: absolute;

  right: -14px;
  top: -18px;

  padding:
    9px
    14px;

  background: var(--pink);

  color: var(--white);

  font-family: var(--hand);

  font-size: 1.4rem;

  font-weight: 700;

  transform: rotate(5deg);
}


.pricing-card-number {
  color: var(--pink);

  font-family: var(--hand);

  font-size: 2rem;
}


.pricing-card-label {
  margin-top: 14px;

  color: var(--orange);

  font-size: .67rem;
  font-weight: 900;

  letter-spacing: .11em;
}


.pricing-card h3 {
  margin-top: 8px;

  font-family: var(--serif);

  font-size: 2.7rem;
}


.pricing-price {
  margin-top: 18px;

  font-size: .7rem;

  font-weight: 900;

  letter-spacing: .12em;
}


.pricing-price strong {
  display: block;

  margin-top: 4px;

  color: var(--pink);

  font-family: var(--serif);

  font-size: 3.5rem;

  letter-spacing: 0;
}


.pricing-card-intro {
  margin-top: 28px;

  min-height: 115px;

  color: #3f3f3f;
}


.pricing-card-featured .pricing-card-intro {
  color:
    rgba(255,255,255,.78);
}


.pricing-list {
  margin:
    28px
    0
    35px;

  padding: 0;

  list-style: none;
}


.pricing-list li {
  padding:
    10px
    0
    10px
    25px;

  position: relative;

  border-bottom:
    1px solid
    rgba(0,0,0,.12);
}


.pricing-card-featured .pricing-list li {
  border-color:
    rgba(255,255,255,.12);
}


.pricing-list li::before {
  content: "◆";

  position: absolute;

  left: 0;
  top: 10px;

  color: var(--teal);

  font-size: .65rem;
}


.pricing-card-link {
  margin-top: auto;

  color: var(--pink);

  font-size: .73rem;
  font-weight: 900;

  letter-spacing: .08em;
}


/* =========================================================
   CUSTOM PROJECT
   ========================================================= */

.custom-project-section {
  padding:
    100px
    7%;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 50px;

  background: var(--black);

  color: var(--white);
}


.custom-project-copy {
  max-width: 780px;
}


.custom-project-copy > p:first-child {
  color: var(--orange);

  font-size: .74rem;
  font-weight: 900;

  letter-spacing: .15em;
}


.custom-project-copy h2 {
  font-family: var(--serif);

  font-size:
    clamp(3.2rem, 6vw, 6rem);

  line-height: .88;
}


.custom-project-copy h2 span {
  display: block;

  color: var(--pink);

  font-family: var(--hand);
}


.custom-project-text {
  margin-top: 28px;

  color:
    rgba(255,255,255,.8);

  white-space: pre-line;
}


/* =========================================================
   ADD ONS
   ========================================================= */

.pricing-addons-section {
  padding:
    105px
    6%;

  background: var(--paper);
}


.addons-grid {
  margin-top: 55px;

  display: grid;

  grid-template-columns:
    repeat(4, minmax(0,1fr));

  gap: 20px;
}


.addon-card {
  min-height: 230px;

  padding:
    28px
    24px;

  border:
    2px solid
    var(--black);

  border-radius:
    25px 16px 29px 18px;

  box-shadow:
    7px 8px 0
    rgba(13,13,13,.11);
}


.addon-card span {
  color: var(--pink);

  font-family: var(--hand);

  font-size: 3rem;

  line-height: .6;
}


.addon-card h3 {
  margin:
    20px
    0
    12px;

  font-family: var(--serif);

  font-size: 1.5rem;
}


.addon-card:nth-child(2) {
  background: #ffe2ed;
}


.addon-card:nth-child(3) {
  background: #dff8f8;
}


.addon-card:nth-child(4) {
  background: #ffe8cf;
}


.addon-note {
  max-width: 750px;

  margin-top: 40px;

  font-family: var(--hand);

  font-size: 1.7rem;
}


/* =========================================================
   PAYMENT
   ========================================================= */

.payment-section {
  padding:
    105px
    6%;

  background: var(--cream);
}


.payment-heading > p {
  color: var(--orange);

  font-size: .75rem;
  font-weight: 900;

  letter-spacing: .15em;
}


.payment-heading h2 {
  font-family: var(--serif);

  font-size:
    clamp(3.2rem, 6vw, 6rem);

  line-height: .88;
}


.payment-heading h2 span {
  display: block;

  color: var(--pink);

  font-family: var(--hand);
}


.payment-steps {
  margin-top: 60px;

  display: grid;

  grid-template-columns:
    repeat(4, minmax(0,1fr));

  gap: 20px;
}


.payment-step {
  min-height: 260px;

  padding:
    28px;

  background: var(--black);

  color: var(--white);

  border-radius:
    27px 17px 31px 19px;
}


.payment-step:nth-child(2),
.payment-step:nth-child(4) {
  transform: translateY(25px);
}


.payment-step > span {
  color: var(--pink);

  font-family: var(--hand);

  font-size: 2.2rem;
}


.payment-step h3 {
  margin:
    12px
    0;

  font-family: var(--serif);

  font-size: 1.7rem;
}


.payment-step p {
  color:
    rgba(255,255,255,.75);
}


/* =========================================================
   HOW TO PAY
   ========================================================= */

.how-to-pay-section {
  padding:
    80px
    7%;

  background: var(--pink);
}


.how-to-pay-card {
  max-width: 850px;

  margin: auto;

  padding:
    48px;

  background: var(--cream);

  border:
    4px solid
    var(--black);

  border-radius:
    30px 18px 35px 21px;

  box-shadow:
    14px 14px 0
    var(--teal);

  transform: rotate(-1deg);
}


.how-to-pay-kicker {
  color: var(--orange);

  font-size: .72rem;
  font-weight: 900;

  letter-spacing: .13em;
}


.how-to-pay-card h2 {
  margin:
    8px
    0
    20px;

  font-family: var(--serif);

  font-size: 4rem;
}


.payment-hand-note {
  display: block;

  margin-top: 25px;

  color: var(--pink);

  font-family: var(--hand);

  font-size: 1.8rem;
}


/* =========================================================
   THIRD PARTY COSTS
   ========================================================= */

.third-party-costs-section {
  padding:
    105px
    7%;

  background: var(--black);

  color: var(--white);
}


.third-party-heading > p {
  color: var(--orange);

  font-size: .75rem;
  font-weight: 900;

  letter-spacing: .15em;
}


.third-party-heading h2 {
  font-family: var(--serif);

  font-size:
    clamp(3.2rem, 6vw, 6rem);

  line-height: .88;
}


.third-party-heading h2 span {
  display: block;

  color: var(--pink);

  font-family: var(--hand);
}


.cost-comparison {
  margin-top: 55px;

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0,1fr));

  gap: 30px;
}


.cost-card {
  min-height: 290px;

  padding:
    38px;

  color: var(--black);

  border-radius:
    29px 18px 34px 20px;
}


.cost-card small {
  font-weight: 900;

  letter-spacing: .12em;
}


.cost-card h3 {
  margin:
    18px
    0;

  font-family: var(--serif);

  font-size: 2rem;
}


.cost-card-me {
  background: var(--teal);

  transform: rotate(-1deg);
}


.cost-card-them {
  background: var(--cream);

  transform: rotate(1deg);
}


.third-party-note {
  max-width: 900px;

  margin-top: 45px;

  color:
    rgba(255,255,255,.78);
}


/* =========================================================
   PRICING FAQ
   ========================================================= */

.pricing-faq-section {
  padding:
    105px
    6%;

  background: var(--paper);
}


.pricing-faq-grid {
  margin-top: 55px;

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0,1fr));

  gap: 25px;
}


.pricing-faq {
  padding:
    30px;

  border:
    2px solid
    var(--black);

  border-radius:
    25px 16px 29px 18px;
}


.pricing-faq h3 {
  margin-bottom: 14px;

  color: var(--pink);

  font-family: var(--serif);

  font-size: 1.5rem;
}


.pricing-faq p {
  white-space: pre-line;
}


/* =========================================================
   PRICING CTA
   ========================================================= */

.pricing-bottom-cta {
  min-height: 500px;

  padding:
    100px
    7%;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

  background: var(--cream);
}


.pricing-bottom-cta > p {
  color: var(--teal);

  font-size: .75rem;
  font-weight: 900;

  letter-spacing: .15em;
}


.pricing-bottom-cta h2 {
  margin:
    12px
    0
    32px;

  font-family: var(--serif);

  font-size:
    clamp(3.2rem, 6vw, 6rem);

  line-height: .88;
}


.pricing-bottom-cta h2 span {
  display: block;

  color: var(--pink);

  font-family: var(--hand);
}


/* =========================================================
   PRICING RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {

  .pricing-page-hero {
    grid-template-columns: 1fr;
  }


  .pricing-hero-art {
    min-height: 390px;
  }


  .pricing-grid {
    grid-template-columns: 1fr;

    max-width: 700px;
  }


  .pricing-card,
  .pricing-card-featured {
    margin-top: 0;

    min-height: auto;
  }


  .pricing-card-intro {
    min-height: 0;
  }


  .addons-grid,
  .payment-steps {
    grid-template-columns:
      repeat(2, minmax(0,1fr));
  }


  .payment-step:nth-child(2),
  .payment-step:nth-child(4) {
    transform: none;
  }


  .custom-project-section {
    flex-direction: column;

    align-items: flex-start;
  }

}


@media (max-width: 650px) {

  .pricing-page-hero {
    padding:
      70px
      5%;
  }


  .pricing-page-hero h1 {
    font-size: 4rem;
  }


  .pricing-note {
    width: 275px;

    right: 4%;
  }


  .pricing-packages-section,
  .pricing-addons-section,
  .payment-section,
  .third-party-costs-section,
  .pricing-faq-section {
    padding:
      80px
      5%;
  }


  .addons-grid,
  .payment-steps,
  .cost-comparison,
  .pricing-faq-grid {
    grid-template-columns: 1fr;
  }


  .how-to-pay-section {
    padding:
      65px
      5%;
  }


  .how-to-pay-card {
    padding:
      35px
      25px;
  }


  .pricing-bottom-cta {
    padding:
      80px
      5%;
  }

}

/* =========================================================
   ABOUT / WHO I HELP PAGE
   ========================================================= */


/* =========================================================
   ABOUT HERO
   ========================================================= */

.about-page-hero {
  min-height: 650px;

  padding:
    90px
    6%;

  display: grid;

  grid-template-columns:
    60%
    40%;

  align-items: center;

  position: relative;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 20% 20%,
      #222222,
      #111111 48%,
      #080808 100%
    );

  color: var(--white);
}


.about-hero-copy {
  max-width: 850px;

  position: relative;

  z-index: 5;
}


.about-eyebrow {
  margin-bottom: 22px;

  color: var(--orange);

  font-size: .78rem;
  font-weight: 900;

  letter-spacing: .15em;
}


.about-eyebrow span {
  margin: 0 5px;
}


.about-page-hero h1 {
  font-family: var(--serif);

  font-size:
    clamp(4rem, 7vw, 7.3rem);

  line-height: .84;

  letter-spacing: -.05em;
}


.about-page-hero h1 span {
  display: block;

  color: var(--pink);

  font-family: var(--hand);

  transform: rotate(-2deg);
}


.about-intro {
  max-width: 680px;

  margin-top: 30px;

  color:
    rgba(255,255,255,.82);

  font-size: 1.08rem;

  white-space: pre-line;
}


.about-hand-note {
  margin-top: 25px;

  color: var(--teal);

  font-family: var(--hand);

  font-size: 2rem;

  transform: rotate(-2deg);
}


/* =========================================================
   ABOUT HERO CARD
   ========================================================= */

.about-hero-art {
  min-height: 430px;

  position: relative;
}


.about-note-card {
  width: 340px;

  padding:
    38px
    30px;

  position: absolute;

  right: 8%;
  top: 22%;

  background: var(--cream);

  color: var(--black);

  border:
    4px solid
    var(--gold);

  border-radius:
    27px 17px 32px 20px;

  box-shadow:
    14px 14px 0
    var(--pink);

  transform: rotate(5deg);
}


.about-note-card span {
  display: block;

  color: var(--orange);

  font-size: .72rem;
  font-weight: 900;

  letter-spacing: .12em;
}


.about-note-card strong {
  display: block;

  margin-top: 18px;

  font-family: var(--serif);

  font-size: 2.1rem;

  line-height: 1;
}


.about-note-card em {
  display: block;

  margin-top: 15px;

  color: var(--teal);

  font-family: var(--hand);

  font-size: 2.4rem;

  font-style: normal;
}


/* =========================================================
   GENERAL ABOUT HEADINGS
   ========================================================= */

.about-section-heading > p {
  color: var(--orange);

  font-size: .75rem;
  font-weight: 900;

  letter-spacing: .15em;
}


.about-section-heading h2 {
  font-family: var(--serif);

  font-size:
    clamp(3.2rem, 6vw, 6rem);

  line-height: .88;
}


.about-section-heading h2 span {
  display: block;

  color: var(--pink);

  font-family: var(--hand);
}


/* =========================================================
   WHO I HELP
   ========================================================= */

.who-help-section {
  padding:
    105px
    6%
    120px;

  background: var(--cream);
}


.who-help-grid {
  margin-top: 60px;

  display: grid;

  grid-template-columns:
    repeat(4, minmax(0,1fr));

  gap: 20px;
}


.who-help-card {
  min-height: 310px;

  padding:
    30px
    26px;

  border:
    2px solid
    var(--black);

  border-radius:
    28px 17px 32px 19px;

  box-shadow:
    8px 9px 0
    rgba(13,13,13,.12);

  background: var(--paper);
}


.who-help-card:nth-child(2) {
  background: #ffe1ec;

  transform: translateY(22px) rotate(1deg);
}


.who-help-card:nth-child(3) {
  background: #dcf8f8;

  transform: rotate(-1deg);
}


.who-help-card:nth-child(4) {
  background: #ffe5c9;

  transform: translateY(22px) rotate(1deg);
}


.who-help-card > span {
  color: var(--pink);

  font-family: var(--hand);

  font-size: 2rem;
}


.who-help-card h3 {
  margin:
    24px
    0
    14px;

  font-family: var(--serif);

  font-size: 1.7rem;
}


/* =========================================================
   FIT SECTION
   ========================================================= */

.fit-section {
  padding:
    105px
    7%;

  display: grid;

  grid-template-columns:
    65%
    35%;

  gap: 60px;

  align-items: center;

  background: var(--black);

  color: var(--white);
}


.fit-kicker {
  color: var(--orange);

  font-size: .75rem;
  font-weight: 900;

  letter-spacing: .15em;
}


.fit-copy h2 {
  font-family: var(--serif);

  font-size:
    clamp(3.2rem, 6vw, 6rem);

  line-height: .88;
}


.fit-copy h2 span {
  display: block;

  color: var(--pink);

  font-family: var(--hand);
}


.fit-list {
  margin-top: 40px;

  max-width: 760px;
}


.fit-list p {
  padding:
    14px
    0;

  border-bottom:
    1px solid
    rgba(255,255,255,.12);

  color:
    rgba(255,255,255,.82);
}


.fit-list p::first-letter {
  color: var(--teal);
}


.fit-sticker {
  padding:
    40px
    30px;

  background: var(--cream);

  color: var(--black);

  border:
    4px solid
    var(--gold);

  border-radius:
    28px 18px 34px 20px;

  box-shadow:
    14px 14px 0
    var(--teal);

  transform: rotate(4deg);
}


.fit-sticker strong {
  display: block;

  font-family: var(--serif);

  font-size: 2rem;
}


.fit-sticker span {
  display: block;

  margin:
    10px
    0;

  color: var(--pink);

  font-family: var(--hand);

  font-size: 4rem;
}


.fit-sticker em {
  display: block;

  color: var(--pink);

  font-family: var(--hand);

  font-size: 2.3rem;

  font-style: normal;

  line-height: .9;
}


/* =========================================================
   NOT FIT
   ========================================================= */

.not-fit-section {
  padding:
    105px
    6%;

  background:
    linear-gradient(
      135deg,
      #fff8ed 0%,
      #ffdce9 100%
    );
}


.not-fit-grid {
  margin-top: 55px;

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0,1fr));

  gap: 24px;
}


.not-fit-grid article {
  min-height: 240px;

  padding:
    30px;

  background: var(--paper);

  border:
    2px solid
    var(--black);

  border-radius:
    27px 17px 31px 19px;
}


.not-fit-grid article > span {
  color: var(--pink);

  font-family: var(--hand);

  font-size: 2.5rem;
}


.not-fit-grid h3 {
  margin:
    15px
    0
    12px;

  font-family: var(--serif);

  font-size: 1.55rem;
}


/* =========================================================
   ABOUT ME
   ========================================================= */

.about-me-section {
  padding:
    105px
    7%;

  background: var(--cream);
}


.about-me-heading > p {
  color: var(--orange);

  font-size: .75rem;
  font-weight: 900;

  letter-spacing: .15em;
}


.about-me-heading h2 {
  font-family: var(--serif);

  font-size:
    clamp(3.2rem, 6vw, 6rem);

  line-height: .88;
}


.about-me-heading h2 span {
  display: block;

  color: var(--pink);

  font-family: var(--hand);
}


.about-me-grid {
  margin-top: 55px;

  display: grid;

  grid-template-columns:
    58%
    42%;

  gap: 55px;

  align-items: center;
}


.about-me-copy {
  max-width: 720px;
}


.about-me-copy p {
  margin-bottom: 22px;

  font-size: 1.06rem;

  line-height: 1.7;
}


.about-me-card {
  padding:
    45px
    35px;

  background: var(--black);

  color: var(--white);

  border-radius:
    30px 18px 34px 20px;

  box-shadow:
    14px 14px 0
    var(--pink);

  transform: rotate(2deg);
}


.about-me-small {
  color: var(--orange);

  font-size: .7rem;
  font-weight: 900;

  letter-spacing: .13em;
}


.about-me-card strong {
  display: block;

  margin-top: 20px;

  font-family: var(--serif);

  font-size: 2.5rem;

  line-height: 1;
}


.about-me-card strong em {
  display: block;

  margin-top: 10px;

  color: var(--teal);

  font-family: var(--hand);

  font-style: normal;
}


.about-me-card p {
  margin-top: 25px;

  color:
    rgba(255,255,255,.78);
}


/* =========================================================
   HOW I WORK
   ========================================================= */

.how-i-work-section {
  padding:
    105px
    6%;

  background: var(--paper);
}


.how-i-work-grid {
  margin-top: 60px;

  display: grid;

  grid-template-columns:
    repeat(4, minmax(0,1fr));

  gap: 20px;
}


.how-i-work-grid article {
  min-height: 290px;

  padding:
    28px;

  background: var(--black);

  color: var(--white);

  border-radius:
    27px 17px 32px 19px;
}


.how-i-work-grid article:nth-child(2),
.how-i-work-grid article:nth-child(4) {
  transform: translateY(24px);
}


.how-i-work-grid article > span {
  color: var(--pink);

  font-family: var(--hand);

  font-size: 2.1rem;
}


.how-i-work-grid h3 {
  margin:
    18px
    0
    13px;

  font-family: var(--serif);

  font-size: 1.55rem;
}


.how-i-work-grid p {
  color:
    rgba(255,255,255,.75);
}


/* =========================================================
   ABOUT POINT
   ========================================================= */

.about-point-section {
  padding:
    105px
    7%;

  background: var(--black);

  color: var(--white);

  text-align: center;
}


.about-point-section > p:first-child {
  color: var(--orange);

  font-size: .75rem;
  font-weight: 900;

  letter-spacing: .15em;
}


.about-point-section h2 {
  margin-top: 12px;

  font-family: var(--serif);

  font-size:
    clamp(3.2rem, 6vw, 6rem);

  line-height: .88;
}


.about-point-section h2 span {
  display: block;

  color: var(--pink);

  font-family: var(--hand);
}


.about-point-copy {
  max-width: 720px;

  margin:
    30px
    auto
    0;

  color:
    rgba(255,255,255,.8);

  white-space: pre-line;
}


/* =========================================================
   ABOUT CTA
   ========================================================= */

.about-bottom-cta {
  min-height: 500px;

  padding:
    100px
    7%;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

  background: var(--cream);
}


.about-bottom-cta > p {
  color: var(--teal);

  font-size: .75rem;
  font-weight: 900;

  letter-spacing: .15em;
}


.about-bottom-cta h2 {
  margin:
    12px
    0
    32px;

  font-family: var(--serif);

  font-size:
    clamp(3.2rem, 6vw, 6rem);

  line-height: .88;
}


.about-bottom-cta h2 span {
  display: block;

  color: var(--pink);

  font-family: var(--hand);
}


/* =========================================================
   ABOUT RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {

  .about-page-hero {
    grid-template-columns: 1fr;
  }


  .about-hero-art {
    min-height: 390px;
  }


  .who-help-grid,
  .how-i-work-grid {
    grid-template-columns:
      repeat(2, minmax(0,1fr));
  }


  .fit-section,
  .about-me-grid {
    grid-template-columns: 1fr;
  }


  .fit-sticker {
    max-width: 450px;
  }

}


@media (max-width: 650px) {

  .about-page-hero {
    padding:
      70px
      5%;
  }


  .about-page-hero h1 {
    font-size: 4rem;
  }


  .about-note-card {
    width: 280px;

    right: 4%;
  }


  .who-help-section,
  .not-fit-section,
  .about-me-section,
  .how-i-work-section {
    padding:
      80px
      5%;
  }


  .who-help-grid,
  .not-fit-grid,
  .how-i-work-grid {
    grid-template-columns: 1fr;
  }


  .who-help-card:nth-child(2),
  .who-help-card:nth-child(4),
  .how-i-work-grid article:nth-child(2),
  .how-i-work-grid article:nth-child(4) {
    transform: none;
  }


  .fit-section {
    padding:
      80px
      5%;
  }


  .about-point-section,
  .about-bottom-cta {
    padding:
      80px
      5%;
  }

}

/* =========================================================
   CONTACT PAGE
   ========================================================= */


/* =========================================================
   CONTACT HERO
   ========================================================= */

.contact-page-hero {
  min-height: 650px;

  padding:
    90px
    6%;

  display: grid;

  grid-template-columns:
    60%
    40%;

  align-items: center;

  position: relative;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 20% 20%,
      #222222,
      #111111 48%,
      #080808 100%
    );

  color: var(--white);
}


.contact-hero-copy {
  max-width: 850px;

  position: relative;

  z-index: 5;
}


.contact-eyebrow {
  margin-bottom: 22px;

  color: var(--orange);

  font-size: .78rem;
  font-weight: 900;

  letter-spacing: .15em;
}


.contact-eyebrow span {
  margin: 0 5px;
}


.contact-page-hero h1 {
  font-family: var(--serif);

  font-size:
    clamp(4rem, 7vw, 7.3rem);

  line-height: .84;

  letter-spacing: -.05em;
}


.contact-page-hero h1 span {
  display: block;

  color: var(--pink);

  font-family: var(--hand);

  transform: rotate(-2deg);
}


.contact-intro {
  max-width: 680px;

  margin-top: 30px;

  color:
    rgba(255,255,255,.82);

  font-size: 1.08rem;

  white-space: pre-line;
}


.contact-hand-note {
  margin-top: 25px;

  color: var(--teal);

  font-family: var(--hand);

  font-size: 1.9rem;

  transform: rotate(-2deg);
}


/* =========================================================
   HERO NOTE CARD
   ========================================================= */

.contact-hero-art {
  min-height: 430px;

  position: relative;
}


.contact-note-card {
  width: 340px;

  padding:
    38px
    30px;

  position: absolute;

  right: 8%;
  top: 22%;

  background: var(--cream);

  color: var(--black);

  border:
    4px solid
    var(--gold);

  border-radius:
    27px 17px 32px 20px;

  box-shadow:
    14px 14px 0
    var(--teal);

  transform: rotate(5deg);
}


.contact-note-card span {
  display: block;

  color: var(--orange);

  font-size: .72rem;
  font-weight: 900;

  letter-spacing: .12em;
}


.contact-note-card strong {
  display: block;

  margin-top: 18px;

  font-family: var(--serif);

  font-size: 2.1rem;

  line-height: 1;
}


.contact-note-card em {
  display: block;

  margin-top: 15px;

  color: var(--pink);

  font-family: var(--hand);

  font-size: 2.3rem;

  font-style: normal;

  line-height: .9;
}


/* =========================================================
   MAIN CONTACT AREA
   ========================================================= */

.contact-main-section {
  padding:
    105px
    6%;

  background: var(--cream);
}


.contact-main-grid {
  display: grid;

  grid-template-columns:
    48%
    52%;

  gap: 60px;

  align-items: start;
}


/* =========================================================
   CONTACT INFO
   ========================================================= */

.contact-section-kicker {
  color: var(--orange);

  font-size: .75rem;
  font-weight: 900;

  letter-spacing: .15em;
}


.contact-info-panel h2 {
  font-family: var(--serif);

  font-size:
    clamp(3rem, 5vw, 5.5rem);

  line-height: .88;
}


.contact-info-panel h2 span {
  display: block;

  color: var(--pink);

  font-family: var(--hand);
}


.contact-info-intro {
  max-width: 650px;

  margin-top: 28px;

  font-size: 1.05rem;

  white-space: pre-line;
}


/* =========================================================
   CONTACT PROMPTS
   ========================================================= */

.contact-prompt-list {
  margin-top: 45px;
}


.contact-prompt-list article {
  padding:
    18px
    0;

  display: grid;

  grid-template-columns:
    55px
    1fr;

  gap: 18px;

  border-bottom:
    1px solid
    rgba(0,0,0,.15);
}


.contact-prompt-list article > span {
  color: var(--pink);

  font-family: var(--hand);

  font-size: 1.8rem;
}


.contact-prompt-list strong {
  display: block;

  font-size: .82rem;

  letter-spacing: .08em;
}


.contact-prompt-list p {
  margin-top: 4px;

  color: #555;
}


/* =========================================================
   CONTACT FORM CARD
   ========================================================= */

.contact-form-card {
  padding:
    42px;

  background: var(--black);

  color: var(--white);

  border:
    4px solid
    var(--pink);

  border-radius:
    30px 18px 35px 21px;

  box-shadow:
    14px 14px 0
    var(--teal);

  transform: rotate(.5deg);
}


.contact-form-kicker {
  color: var(--orange);

  font-size: .72rem;
  font-weight: 900;

  letter-spacing: .13em;
}


.contact-form-card h2 {
  margin:
    6px
    0
    30px;

  font-family: var(--serif);

  font-size: 3rem;
}


/* =========================================================
   FIELDS
   ========================================================= */

.contact-form {
  display: grid;

  gap: 20px;
}


.contact-field {
  display: grid;

  gap: 8px;
}


.contact-field label {
  font-size: .68rem;
  font-weight: 900;

  letter-spacing: .1em;
}


.contact-field input,
.contact-field select,
.contact-field textarea {
  width: 100%;

  padding:
    14px
    15px;

  border:
    2px solid
    rgba(255,255,255,.35);

  border-radius:
    12px 8px 14px 9px;

  background: #151515;

  color: var(--white);

  font-family: var(--sans);

  font-size: .95rem;

  outline: none;
}


.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
  border-color: var(--teal);
}


.contact-field textarea {
  resize: vertical;

  min-height: 170px;
}


.contact-submit {
  margin-top: 5px;

  padding:
    16px
    22px;

  border: 0;

  background: var(--pink);

  color: var(--white);

  font-family: var(--sans);

  font-size: .75rem;
  font-weight: 900;

  letter-spacing: .09em;

  cursor: pointer;

  box-shadow:
    7px 7px 0
    var(--teal);

  transform: rotate(-1deg);
}


.contact-submit:hover {
  transform: rotate(1deg);
}


.contact-form-small {
  margin-top: 25px;

  color:
    rgba(255,255,255,.68);

  font-size: .8rem;
}


.contact-form-small a {
  color: var(--pink);

  font-weight: 800;
}


/* =========================================================
   WHAT HAPPENS NEXT
   ========================================================= */

.contact-next-section {
  padding:
    105px
    6%;

  background: var(--paper);
}


.contact-section-heading > p {
  color: var(--orange);

  font-size: .75rem;
  font-weight: 900;

  letter-spacing: .15em;
}


.contact-section-heading h2 {
  font-family: var(--serif);

  font-size:
    clamp(3.2rem, 6vw, 6rem);

  line-height: .88;
}


.contact-section-heading h2 span {
  display: block;

  color: var(--pink);

  font-family: var(--hand);
}


.contact-next-grid {
  margin-top: 60px;

  display: grid;

  grid-template-columns:
    repeat(4, minmax(0,1fr));

  gap: 20px;
}


.contact-next-grid article {
  min-height: 280px;

  padding:
    28px;

  background: var(--black);

  color: var(--white);

  border-radius:
    27px 17px 32px 19px;
}


.contact-next-grid article:nth-child(2),
.contact-next-grid article:nth-child(4) {
  transform: translateY(24px);
}


.contact-next-grid article > span {
  color: var(--pink);

  font-family: var(--hand);

  font-size: 2.1rem;
}


.contact-next-grid h3 {
  margin:
    18px
    0
    13px;

  font-family: var(--serif);

  font-size: 1.55rem;
}


.contact-next-grid p {
  color:
    rgba(255,255,255,.75);

  white-space: pre-line;
}


/* =========================================================
   CONTACT OPTIONS
   ========================================================= */

.contact-options-section {
  padding:
    105px
    6%;

  background:
    linear-gradient(
      135deg,
      #fff8ed 0%,
      #ffdce9 100%
    );
}


.contact-options-copy > p {
  color: var(--orange);

  font-size: .75rem;
  font-weight: 900;

  letter-spacing: .15em;
}


.contact-options-copy h2 {
  font-family: var(--serif);

  font-size:
    clamp(3.2rem, 6vw, 6rem);

  line-height: .88;
}


.contact-options-copy h2 span {
  display: block;

  color: var(--pink);

  font-family: var(--hand);
}


.contact-options-grid {
  margin-top: 55px;

  display: grid;

  grid-template-columns:
    repeat(3, minmax(0,1fr));

  gap: 24px;
}


.contact-option-card {
  min-height: 230px;

  padding:
    30px;

  background: var(--paper);

  border:
    2px solid
    var(--black);

  border-radius:
    27px 17px 31px 19px;

  box-shadow:
    8px 9px 0
    rgba(13,13,13,.12);

  transition: .2s ease;
}


.contact-option-card:hover {
  transform: translateY(-5px);
}


.contact-option-card > span {
  color: var(--pink);

  font-family: var(--hand);

  font-size: 2.5rem;
}


.contact-option-card strong {
  display: block;

  margin-top: 18px;

  font-family: var(--serif);

  font-size: 1.6rem;
}


.contact-option-card p {
  margin-top: 12px;
}


/* =========================================================
   BOTTOM CONTACT SECTION
   ========================================================= */

.contact-bottom-section {
  min-height: 500px;

  padding:
    100px
    7%;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

  background: var(--black);

  color: var(--white);
}


.contact-bottom-section > p:first-child {
  color: var(--orange);

  font-size: .75rem;
  font-weight: 900;

  letter-spacing: .15em;
}


.contact-bottom-section h2 {
  margin:
    12px
    0
    22px;

  font-family: var(--serif);

  font-size:
    clamp(3.2rem, 6vw, 6rem);

  line-height: .88;
}


.contact-bottom-section h2 span {
  display: block;

  color: var(--pink);

  font-family: var(--hand);
}


.contact-bottom-section > p:not(:first-child) {
  margin-bottom: 30px;

  color:
    rgba(255,255,255,.8);
}


/* =========================================================
   CONTACT RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {

  .contact-page-hero,
  .contact-main-grid {
    grid-template-columns: 1fr;
  }


  .contact-hero-art {
    min-height: 390px;
  }


  .contact-next-grid {
    grid-template-columns:
      repeat(2, minmax(0,1fr));
  }


  .contact-options-grid {
    grid-template-columns: 1fr;
  }

}


@media (max-width: 650px) {

  .contact-page-hero {
    padding:
      70px
      5%;
  }


  .contact-page-hero h1 {
    font-size: 4rem;
  }


  .contact-note-card {
    width: 280px;

    right: 4%;
  }


  .contact-main-section,
  .contact-next-section,
  .contact-options-section {
    padding:
      80px
      5%;
  }


  .contact-next-grid {
    grid-template-columns: 1fr;
  }


  .contact-next-grid article:nth-child(2),
  .contact-next-grid article:nth-child(4) {
    transform: none;
  }


  .contact-form-card {
    padding:
      32px
      22px;
  }


  .contact-bottom-section {
    padding:
      80px
      5%;
  }

}

/* =========================================================
   LEGAL / TERMS PAGE
   ========================================================= */


/* =========================================================
   LEGAL HERO
   ========================================================= */

.legal-page-hero {
  min-height: 580px;

  padding:
    90px
    6%;

  display: grid;

  grid-template-columns:
    65%
    35%;

  align-items: center;

  gap: 50px;

  background:
    radial-gradient(
      circle at 20% 20%,
      #222222,
      #111111 48%,
      #080808 100%
    );

  color: var(--white);
}


.legal-hero-copy {
  max-width: 850px;
}


.legal-eyebrow {
  color: var(--orange);

  font-size: .76rem;
  font-weight: 900;

  letter-spacing: .15em;
}


.legal-page-hero h1 {
  margin-top: 10px;

  font-family: var(--serif);

  font-size:
    clamp(4rem, 7vw, 7rem);

  line-height: .84;

  letter-spacing: -.05em;
}


.legal-page-hero h1 span {
  display: block;

  color: var(--pink);

  font-family: var(--hand);

  transform: rotate(-2deg);
}


.legal-intro {
  max-width: 680px;

  margin-top: 30px;

  color:
    rgba(255,255,255,.82);

  font-size: 1.07rem;

  white-space: pre-line;
}


.legal-hand-note {
  margin-top: 26px;

  color: var(--teal);

  font-family: var(--hand);

  font-size: 1.9rem;
}


/* =========================================================
   LEGAL HERO CARD
   ========================================================= */

.legal-hero-card {
  padding:
    40px
    32px;

  background: var(--cream);

  color: var(--black);

  border:
    4px solid
    var(--gold);

  border-radius:
    28px 18px 34px 20px;

  box-shadow:
    14px 14px 0
    var(--pink);

  transform: rotate(4deg);
}


.legal-hero-card strong {
  display: block;

  font-family: var(--serif);

  font-size: 2rem;
}


.legal-hero-card span {
  display: block;

  margin-top: 8px;

  font-weight: 900;

  letter-spacing: .08em;
}


.legal-hero-card em {
  display: block;

  margin-top: 12px;

  color: var(--teal);

  font-family: var(--hand);

  font-size: 2.4rem;

  font-style: normal;
}


/* =========================================================
   LEGAL CONTENT
   ========================================================= */

.legal-content-section {
  padding:
    105px
    6%
    120px;

  background: var(--cream);
}


.legal-content-wrap {
  max-width: 1250px;

  margin: auto;

  display: grid;

  grid-template-columns:
    260px
    minmax(0,1fr);

  gap: 60px;

  align-items: start;
}


/* =========================================================
   LEGAL SIDEBAR
   ========================================================= */

.legal-side-note {
  padding:
    28px;

  position: sticky;

  top: 30px;

  background: var(--black);

  color: var(--white);

  border-radius:
    25px 16px 29px 18px;

  box-shadow:
    9px 10px 0
    var(--pink);

  transform: rotate(-1deg);
}


.legal-side-note span {
  display: block;

  color: var(--orange);

  font-size: .68rem;
  font-weight: 900;

  letter-spacing: .12em;
}


.legal-side-note strong {
  display: block;

  margin-top: 10px;

  font-family: var(--serif);

  font-size: 1.5rem;
}


.legal-side-note p {
  margin-top: 18px;

  color:
    rgba(255,255,255,.72);

  font-size: .88rem;
}


/* =========================================================
   LEGAL BLOCKS
   ========================================================= */

.legal-copy {
  max-width: 850px;
}


.legal-block {
  margin-bottom: 28px;

  padding:
    35px
    38px;

  position: relative;

  background: var(--paper);

  border:
    2px solid
    var(--black);

  border-radius:
    27px 17px 31px 19px;

  box-shadow:
    7px 8px 0
    rgba(13,13,13,.1);
}


.legal-block:nth-child(3n) {
  transform: rotate(.35deg);
}


.legal-block:nth-child(4n) {
  transform: rotate(-.35deg);
}


.legal-number {
  display: block;

  color: var(--pink);

  font-family: var(--hand);

  font-size: 1.8rem;
}


.legal-block h2 {
  margin:
    8px
    0
    20px;

  font-family: var(--serif);

  font-size: 2rem;

  line-height: 1;
}


.legal-block p {
  margin-bottom: 15px;

  color: #333;

  line-height: 1.7;
}


.legal-block p:last-child {
  margin-bottom: 0;
}


.legal-block-final {
  background: var(--black);

  color: var(--white);

  border-color: var(--pink);

  box-shadow:
    10px 11px 0
    var(--teal);
}


.legal-block-final h2 {
  color: var(--white);
}


.legal-block-final p {
  color:
    rgba(255,255,255,.78);
}


.legal-block-final .btn {
  margin-top: 20px;
}


/* =========================================================
   LEGAL RESPONSIVE
   ========================================================= */

@media (max-width: 950px) {

  .legal-page-hero {
    grid-template-columns: 1fr;
  }


  .legal-hero-card {
    max-width: 420px;
  }


  .legal-content-wrap {
    grid-template-columns: 1fr;
  }


  .legal-side-note {
    position: relative;

    top: auto;

    max-width: 450px;
  }

}


@media (max-width: 650px) {

  .legal-page-hero {
    padding:
      70px
      5%;
  }


  .legal-page-hero h1 {
    font-size: 4rem;
  }


  .legal-content-section {
    padding:
      80px
      5%;
  }


  .legal-block {
    padding:
      28px
      22px;
  }


  .legal-block h2 {
    font-size: 1.7rem;
  }

}

/* =========================================================
   PRIVACY POLICY EXTRAS
   ========================================================= */

.privacy-contact-list {
  margin-top: 22px;

  padding:
    22px
    24px;

  background: #f4eee4;

  border-left:
    5px solid
    var(--pink);

  border-radius:
    10px 18px 12px 16px;
}


.privacy-contact-list p {
  margin-bottom: 8px;
}


.privacy-contact-list p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   PRIVACY DATA CARDS
   ========================================================= */

.privacy-data-list {
  margin:
    25px
    0;

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0,1fr));

  gap: 16px;
}


.privacy-data-list > div {
  padding:
    20px;

  background: var(--cream);

  border:
    2px solid
    var(--black);

  border-radius:
    20px 12px 23px 14px;
}


.privacy-data-list strong {
  display: block;

  margin-bottom: 9px;

  color: var(--pink);

  font-size: .75rem;

  letter-spacing: .1em;
}


/* =========================================================
   PRIVACY RIGHTS
   ========================================================= */

.privacy-rights-grid {
  margin:
    25px
    0
    30px;

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0,1fr));

  gap: 16px;
}


.privacy-rights-grid > div {
  padding:
    22px;

  background: var(--black);

  color: var(--white);

  border-radius:
    21px 13px 24px 15px;
}


.privacy-rights-grid strong {
  display: block;

  margin-bottom: 10px;

  color: var(--teal);

  font-size: .76rem;

  letter-spacing: .1em;
}


.privacy-rights-grid p {
  color:
    rgba(255,255,255,.78);
}


/* =========================================================
   ICO
   ========================================================= */

.privacy-ico-card {
  margin-top: 25px;

  padding:
    28px;

  background: var(--teal);

  color: var(--black);

  border-radius:
    25px 15px 29px 17px;

  transform: rotate(-.4deg);
}


.privacy-ico-card > strong {
  display: block;

  margin-bottom: 16px;

  font-family: var(--serif);

  font-size: 1.4rem;
}


.privacy-ico-card p {
  margin-bottom: 4px;

  color: var(--black);
}


/* =========================================================
   PRIVACY RESPONSIVE
   ========================================================= */

@media (max-width: 650px) {

  .privacy-data-list,
  .privacy-rights-grid {
    grid-template-columns: 1fr;
  }

}


/* =========================================================
   COOKIE POLICY EXTRAS
   ========================================================= */

.cookie-type-grid {
  margin:
    25px
    0;

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0,1fr));

  gap: 16px;
}


.cookie-type-grid > div {
  padding:
    22px;

  background: var(--cream);

  border:
    2px solid
    var(--black);

  border-radius:
    21px 13px 25px 15px;
}


.cookie-type-grid strong {
  display: block;

  margin-bottom: 10px;

  color: var(--pink);

  font-size: .76rem;

  letter-spacing: .1em;
}


.cookie-type-grid p {
  margin-bottom: 10px;
}


.cookie-type-grid p:last-child {
  margin-bottom: 0;
}


@media (max-width: 650px) {

  .cookie-type-grid {
    grid-template-columns: 1fr;
  }

}

/* =========================================================
   HOME FINAL LINKING EXTRAS
   ========================================================= */


/* =========================================================
   HOME SECTION LINKS
   ========================================================= */

.home-section-link-wrap {
  margin-top: 55px;

  text-align: center;
}


.home-section-link {
  display: inline-block;

  padding-bottom: 5px;

  color: var(--pink);

  font-size: .76rem;
  font-weight: 900;

  letter-spacing: .1em;

  border-bottom:
    3px solid
    var(--gold);

  transition: .2s ease;
}


.home-section-link:hover {
  color: var(--teal);

  transform: translateY(-2px);
}


.home-section-link-dark .home-section-link {
  color: var(--white);
}


.home-section-link-dark .home-section-link:hover {
  color: var(--teal);
}


/* =========================================================
   CLICKABLE HOME CARDS
   ========================================================= */

a.work-card {
  color: inherit;
}


a.service-card {
  color: inherit;
}


a.service-card:hover {
  color: inherit;
}


/* =========================================================
   HOME PRICING TEASER
   ========================================================= */

.home-pricing-teaser {
  min-height: 540px;

  padding:
    100px
    7%;

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  text-align: center;

  background:
    linear-gradient(
      135deg,
      #fff8ed 0%,
      #ffdce9 100%
    );
}


.home-pricing-teaser > p:first-child {
  color: var(--orange);

  font-size: .75rem;
  font-weight: 900;

  letter-spacing: .15em;
}


.home-pricing-teaser h2 {
  margin-top: 12px;

  font-family: var(--serif);

  font-size:
    clamp(3.2rem, 6vw, 6rem);

  line-height: .88;
}


.home-pricing-teaser h2 span {
  display: block;

  color: var(--pink);

  font-family: var(--hand);
}


.home-pricing-copy {
  max-width: 700px;

  margin:
    28px
    auto
    32px;

  font-size: 1.05rem;

  white-space: pre-line;
}


/* =========================================================
   EXPANDED FOOTER
   ========================================================= */

.site-footer-expanded {
  padding:
    45px
    5%;

  display: grid;

  grid-template-columns:
    1.3fr
    1fr
    1fr;

  align-items: start;

  gap: 50px;
}


.footer-brand {
  display: flex;

  flex-direction: column;

  gap: 8px;
}


.footer-brand strong {
  font-family: var(--serif);

  font-size: 1.2rem;
}


.footer-brand span {
  color:
    rgba(255,255,255,.62);

  font-size: .72rem;
}


.footer-nav,
.footer-legal {
  display: flex;

  flex-direction: column;

  gap: 10px;
}


.footer-nav a,
.footer-legal a {
  color:
    rgba(255,255,255,.72);

  font-size: .72rem;
  font-weight: 800;

  letter-spacing: .06em;

  transition: .2s ease;
}


.footer-nav a:hover,
.footer-legal a:hover {
  color: var(--pink);
}


/* =========================================================
   FOOTER / HOME EXTRA RESPONSIVE
   ========================================================= */

@media (max-width: 760px) {

  .site-footer-expanded {
    grid-template-columns: 1fr;

    gap: 30px;
  }


  .footer-nav,
  .footer-legal {
    gap: 8px;
  }


  .home-pricing-teaser {
  padding:
    80px
    5%;
}

}

/* =========================================================
   HOLDAWAY — 2 BEFORE / 2 AFTER
   ========================================================= */

.holdaway-before-after-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 24px;

  align-items: start;
}


.comparison-side {
  display: flex;

  flex-direction: column;

  gap: 22px;
}


.comparison-side-title {
  width: fit-content;

  padding:
    8px
    15px;

  font-size: .72rem;
  font-weight: 900;

  letter-spacing: .12em;

  border-radius:
    12px 8px 14px 9px;
}


.comparison-side-title-before {
  background: var(--black);

  color: var(--white);

  transform: rotate(-2deg);
}


.comparison-side-title-after {
  background: var(--pink);

  color: var(--white);

  transform: rotate(2deg);
}


.holdaway-before-after-grid .comparison-card {
  width: 100%;
}


.holdaway-before-after-grid .comparison-card img {
  display: block;

  width: 100%;

  height: auto;

  object-fit: contain;
}


.holdaway-before-after-grid .comparison-before:nth-of-type(3) {
  transform: rotate(1deg);
}


.holdaway-before-after-grid .comparison-after:nth-of-type(3) {
  transform: rotate(-1deg);
}


/* MOBILE */

@media (max-width: 700px) {

  .holdaway-before-after-grid {
    grid-template-columns: 1fr;

    gap: 45px;
  }

}


/* =========================================================
   FINAL HERO POSITION FIX
   DESKTOP ONLY
   ========================================================= */

@media (min-width: 1001px) {

  .hero-main-flamingo {
    left: 85px;
    top: 95px;
  }

  .hero-logo-websites {
    left: 335px;
  }

}
/* =========================================================
   MOBILE RESCUE FIX
   Keeps desktop untouched
   ========================================================= */

@media (max-width: 760px) {

  /* Stop ANY element creating sideways page overflow */
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  /* ---------- HEADER ---------- */

  .site-header {
    width: 100%;
    padding: 10px 5%;
    gap: 12px;
  }

  .header-logo {
    width: 100px;
    height: 65px;
    flex-shrink: 0;
  }

  .header-logo img {
    width: 95px;
    max-width: 100%;
  }

  .header-cta {
    max-width: 190px;
    padding: 11px 13px;
    font-size: .6rem;
    line-height: 1.2;
    text-align: center;
    box-shadow: 5px 5px 0 var(--black);
  }


  /* ---------- HERO ---------- */

  .hero {
    width: 100%;
    min-height: auto;
    display: block;

    padding:
      48px
      5%
      55px;

    overflow: hidden;
  }

  .hero-copy-wrap {
    width: 100%;
    max-width: 100%;
    padding-top: 0;
  }

  .hero-eyebrow {
    max-width: 100%;
    font-size: .67rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
  }


  /* ---------- MAIN WORDING ---------- */

  .hero-serif {
    width: 100%;

    font-size:
      clamp(3rem, 15vw, 4.3rem);

    line-height: .82;
    letter-spacing: -.045em;

    overflow-wrap: normal;
  }

  .hero-website {
    margin-top: 15px;
  }


  /* ---------- PERSONALITY SIGN ---------- */

  .personality-strip {
    width: calc(100% - 4px);
    max-width: calc(100% - 4px);

    min-height: 82px;

    margin:
      18px
      0
      18px;

    padding:
      12px
      15px;

    overflow: visible;
  }

  .personality-text {
    max-width: 100%;

    font-size:
      clamp(2.7rem, 12vw, 3.7rem);

    line-height: .86;

    white-space: nowrap;
  }

  .personality-flamingo {
    width: 125px;

    right: -8px;
    top: -78px;
  }

  .flamingo-whisper {
    display: none;
  }


  /* ---------- SHOULD TOO ---------- */

  .hero-should {
    max-width: 100%;

    font-size:
      clamp(3rem, 13vw, 4rem);

    line-height: .85;
  }

  .hero-should::after {
    width: 72%;
  }


  /* ---------- PUNCHLINE / COPY ---------- */

  .hero-punchline {
    width: 100%;
    max-width: 100%;

    font-size:
      clamp(1.65rem, 8vw, 2.15rem);

    line-height: 1.05;

    overflow-wrap: break-word;
  }

  .hero-description {
    width: 100%;
    max-width: 100%;

    font-size: .98rem;
    line-height: 1.55;

    white-space: pre-line;
  }


  /* ---------- BUTTONS ---------- */

  .hero-buttons {
    width: 100%;

    display: grid;
    grid-template-columns: 1fr;

    gap: 15px;

    margin-top: 25px;
  }

  .hero-buttons .btn {
    width: 100%;
    max-width: 100%;
  }


  /* =====================================================
     HERO ART
     Scale the original artwork instead of cropping it
     ===================================================== */

  .hero-art {
    width: 430px;
    height: 500px;
    min-height: 500px;

    position: relative;

    margin:
      30px
      0
      -55px;

    left: 50%;

    transform:
      translateX(-50%)
      scale(.82);

    transform-origin:
      top center;
  }


  /* Splash remains decorative but centred */

  .hero-splash-outer {
    width: 800px;
    height: 430px;

    left: 50%;
    top: 50%;

    transform:
      translate(-50%, -50%)
      rotate(4deg);
  }

  .hero-splash-inner {
    width: 620px;
    height: 360px;

    left: 50%;
    top: 50%;

    transform:
      translate(-50%, -50%)
      rotate(-6deg);
  }


  /* Badge */

  .hero-badge {
    width: 325px;
    height: 325px;

    left: 53px;
    top: 90px;
  }


  /* Main flamingo */

  .hero-main-flamingo {
    width: 285px;

    left: -3px;
    top: 102px;
  }


  /* NO */

  .hero-logo-no {
    left: 250px;
    top: 110px;

    font-size: 3.8rem;
  }


  /* Beige graphic */

  .hero-beige-word {
    width: 275px;

    left: 145px;
    top: 205px;
  }


  /* Websites */

  .hero-logo-websites {
    left: 175px;
    top: 345px;

    font-size: 2.55rem;

    white-space: nowrap;
  }


  /* ---------- HOME SECTIONS ---------- */

  .work-section,
  .services-section {
    padding-left: 5%;
    padding-right: 5%;
  }

  .work-heading,
  .services-heading {
    width: 100%;
    max-width: 100%;
  }

  .work-heading h2,
  .services-heading h2,
  .home-cta h2,
  .home-pricing-teaser h2 {
    overflow-wrap: break-word;
  }


  /* ---------- CARDS ---------- */

  .work-grid,
  .services-grid {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
  }

  .work-card,
  .service-card {
    width: 100%;
    max-width: 100%;
  }


  /* ---------- TICKER ---------- */

  .brand-strip {
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
  }


  /* ---------- FOOTER ---------- */

  .site-footer,
  .site-footer-expanded {
    width: 100%;
    max-width: 100%;
  }
}


/* Extra-small phones */

@media (max-width: 400px) {

  .hero-serif {
    font-size: 3rem;
  }

  .personality-text {
    font-size: 2.65rem;
  }

  .hero-should {
    font-size: 3rem;
  }

  .hero-art {
    transform:
      translateX(-50%)
      scale(.74);

    margin-bottom: -90px;
  }

}


/* =========================================================
   MOBILE HAMBURGER MENU
   ========================================================= */

.mobile-menu-toggle,
.mobile-menu {
  display: none;
}

@media (max-width: 760px) {

  .mobile-menu-toggle {
    width: 44px;
    height: 44px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 5px;

    padding: 0;

    border: 0;

    background: transparent;

    cursor: pointer;

    position: relative;
    z-index: 110;
  }

  .mobile-menu-toggle span {
    width: 26px;
    height: 3px;

    display: block;

    background: var(--black);

    border-radius: 999px;

    transition: .2s ease;
  }

  .mobile-menu-toggle.is-open span:nth-child(1) {
    transform:
      translateY(8px)
      rotate(45deg);
  }

  .mobile-menu-toggle.is-open span:nth-child(2) {
    opacity: 0;
  }

  .mobile-menu-toggle.is-open span:nth-child(3) {
    transform:
      translateY(-8px)
      rotate(-45deg);
  }

  .mobile-menu {
    width: calc(100% - 10%);

    display: none;

    position: absolute;

    left: 5%;
    top: 82px;

    z-index: 105;

    padding:
      22px
      20px;

    background: var(--black);

    border:
      3px solid
      var(--pink);

    border-radius:
      22px 14px 26px 16px;

    box-shadow:
      9px 9px 0
      var(--teal);
  }

  .mobile-menu.is-open {
    display: flex;

    flex-direction: column;

    gap: 4px;
  }

  .mobile-menu a {
    padding:
      13px
      8px;

    color: var(--white);

    font-size: .75rem;
    font-weight: 900;

    letter-spacing: .08em;

    border-bottom:
      1px solid
      rgba(255,255,255,.12);
  }

  .mobile-menu a:last-child {
    border-bottom: 0;
  }

}}}