/* Dotflyer Creative Studio — design system */

:root {

  --ink: #0a0a0b;

  --paper: #f7f6f3;

  --white: #fff;

  --red: #f0182d;

  --red-dark: #c90e25;

  --muted: #777774;

  --line: #deddd8;

  --lime: #d7ff65;

  --blue: #355dff;

  --font: 'DM Sans', sans-serif;

  --display: 'Manrope', sans-serif;

  --max: 1240px

}* {

  box-sizing: border-box

}html {

  scroll-behavior: smooth;

  scroll-padding-top: 90px

}body {

  margin: 0;

  background: var(--paper);

  color: var(--ink);

  font-family: var(--font);

  font-size: 16px;

  line-height: 1.6;

  overflow-x: hidden

}body.menu-open {

  overflow: hidden

}a {

  color: inherit;

  text-decoration: none

}button {

  font: inherit

}.page-noise {

  position: fixed;

  inset: 0;

  pointer-events: none;

  z-index: 20;

  opacity: .13;

  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http ://www\\.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E")

}.section-shell {

  width: min(var(--max), calc(100% - 64px));

  margin-inline: auto

}.hero {

  min-height: 700px;

  display: grid;

  grid-template-columns: 1fr 1fr;

  align-items: center;

  gap: 35px;

  position: relative;

  padding-top: 74px;

  padding-bottom: 86px

}.hero-copy {

  position: relative;

  z-index: 2;

  padding-bottom: 28px

}.eyebrow, .section-kicker {

  font-size: 11px;

  letter-spacing: 2px;

  font-weight: 700;

  color: #666;

  text-transform: uppercase

}.eyebrow {

  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 24px

}.eyebrow-dot {

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: var(--red);

  box-shadow: 0 0 0 5px #f0182d1b

}.hero h1 {

  font-family: var(--display);

  font-size: clamp(46px, 5.1vw, 74px);

  line-height: 1.04;

  letter-spacing: -4.5px;

  margin: 0;

  max-width: 650px;

  font-weight: 800

}.accent-word {

  color: var(--red);

  position: relative;

  white-space: nowrap

}.accent-word:after {

  content: "";

  position: absolute;

  bottom: 1px;

  left: 0;

  width: 100%;

  height: 7px;

  background: var(--red);

  opacity: .18;

  transform: skewX(-20deg)

}.hero-lede {

  font-size: 17px;

  line-height: 1.85;

  color: #666;

  max-width: 530px;

  margin: 25px 0 30px

}.hero-actions {

  display: flex;

  align-items: center;

  gap: 27px;

  flex-wrap: wrap

}.btn {

  min-height: 54px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 24px;

  padding: 0 24px;

  font-weight: 700;

  font-size: 14px;

  transition: transform .25s, background .25s;

  position: relative;

  overflow: hidden

}.btn span {

  font-size: 20px;

  transition: transform .2s

}.btn:hover {

  transform: translateY(-3px)

}.btn:hover span {

  transform: translate(3px, -3px)

}.btn-primary {

  background: var(--red);

  color: #fff;

  box-shadow: 5px 5px 0 #0a0a0b

}.btn-primary:hover {

  background: var(--red-dark)

}.text-link {

  display: flex;

  align-items: center;

  gap: 10px;

  font-size: 13px;

  font-weight: 700

}.play-icon {

  display: grid;

  place-items: center;

  width: 31px;

  height: 31px;

  border: 1px solid #c6c5c0;

  border-radius: 50%;

  font-size: 10px;

  padding-left: 2px;

  transition: .2s

}.text-link:hover .play-icon {

  background: var(--ink);

  color: #fff

}.hero-proof {

  display: flex;

  align-items: center;

  gap: 13px;

  margin-top: 48px

}.proof-avatars {

  display: flex

}.proof-avatars span {

  width: 31px;

  height: 31px;

  border-radius: 50%;

  display: grid;

  place-items: center;

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

  margin-left: -7px;

  background: #222;

  color: #fff;

  font-size: 12px

}.proof-avatars span:first-child {

  margin-left: 0;

  background: var(--red)

}.proof-avatars span:nth-child(2) {

  background: #d8ff65;

  color: #111

}.proof-avatars span:nth-child(3) {

  background: #d9d5ce;

  color: #111

}.hero-proof strong, .hero-proof small {

  display: block

}.hero-proof strong {

  font-size: 12px

}.hero-proof small {

  font-size: 11px;

  color: #777

}.hero-art {

  min-height: 520px;

  position: relative;

  display: grid;

  place-items: center;

  isolation: isolate

}.art-glow {

  position: absolute;

  width: 360px;

  height: 360px;

  background: radial-gradient(circle, #ff263a30, transparent 69%);

  filter: blur(12px);

  z-index: -1

}.orbit {

  position: absolute;

  border: 1px solid #d7d4ce;

  border-radius: 50%;

  transform: rotate(-23deg)

}.orbit-one {

  width: 510px;

  height: 310px

}.orbit-two {

  width: 420px;

  height: 470px;

  transform: rotate(39deg);

  border-style: dashed;

  opacity: .7

}.creative-board {

    width: min(100%, 620px);

    height: auto;

    /* background: #111; */

    color: #fff;

    border-radius: 5px;

    /* box-shadow: 22px 24px 0 #e8e5de, 0 28px 60px #00000018; */

    transform: rotate(-4deg);

    position: relative;

    z-index: 2;

    overflow: hidden;

    transition: transform .5s cubic-bezier(.2, .8, .2, 1);

}.creative-board img {

      width: 100%;

    height: 100%;

}.hero-art:hover .creative-board {

  transform: rotate(-1deg) translateY(-7px)

}.board-top {

  height: 43px;

  border-bottom: 1px solid #333;

  display: flex;

  align-items: center;

  padding: 0 18px;

  gap: 14px

}.board-dots {

  display: flex;

  gap: 4px

}.board-dots i {

  width: 6px;

  height: 6px;

  border-radius: 50%;

  background: #777

}.board-dots i:first-child {

  background: var(--red)

}.board-label {

  font-size: 8px;

  letter-spacing: 2px;

  color: #999

}.board-menu {

  margin-left: auto;

  color: #aaa;

  letter-spacing: 2px

}.board-content {

  display: grid;

  grid-template-columns: 1fr 1fr;

  align-items: center;

  padding: 28px 24px 18px;

  min-height: 245px

}.mini-label {

  font-size: 8px;

  letter-spacing: 2px;

  color: #a5a5a5

}.board-copy>b {

  display: block;

  font: 800 48px/.96 var(--display);

  letter-spacing: -3px;

  margin: 13px 0

}.board-copy>b em {

  font-style: normal;

  color: var(--red)

}.board-line {

  display: block;

  width: 52px;

  height: 4px;

  background: var(--lime);

  margin: 15px 0

}.board-copy small {

  font-size: 9px;

  color: #999

}.shape-stage {

  height: 190px;

  position: relative

}.shape-circle {

  position: absolute;

  width: 132px;

  height: 132px;

  border-radius: 50%;

  background: var(--red);

  top: 15px;

  right: 0;

  box-shadow: inset -12px -12px 0 #a50b1f

}.shape-square {

  position: absolute;

  width: 93px;

  height: 93px;

  background: var(--lime);

  top: 61px;

  right: 76px;

  transform: rotate(18deg);

  mix-blend-mode: screen

}.shape-pill {

  position: absolute;

  right: 14px;

  top: 91px;

  width: 76px;

  height: 76px;

  border-radius: 50%;

  background: #f3e9d8;

  color: #111;

  display: grid;

  place-items: center;

  font: 800 43px var(--display);

  transform: rotate(12deg)

}.shape-spark {

  position: absolute;

  right: 18px;

  top: -8px;

  color: var(--lime);

  font-size: 33px

}.board-footer {

  display: flex;

  justify-content: space-between;

  border-top: 1px solid #333;

  padding: 12px 18px;

  font-size: 7px;

  letter-spacing: 1.2px;

  color: #888

}.footer-status {

  color: #d7ff65

}.footer-status i {

  display: inline-block;

  width: 5px;

  height: 5px;

  background: #d7ff65;

  border-radius: 50%;

  margin-right: 4px

}.floating-tag {

  position: absolute;

  z-index: 4;

  display: flex;

  gap: 10px;

  align-items: center;

  padding: 12px 15px;

  background: #fff;

  box-shadow: 0 12px 35px #00000012;

  border: 1px solid #e6e3dc;

  animation: float 5s ease-in-out infinite

}.floating-tag b, .floating-tag small {

  display: block

}.floating-tag b {

  font-size: 11px

}.floating-tag small {

  font-size: 9px;

  color: #888;

  margin-top: 2px

}.tag-icon {

  display: grid;

  place-items: center;

  width: 33px;

  height: 33px;

  background: #d7ff65;

  color: #111;

  font-size: 18px

}.red-icon {

  background: var(--red);

  color: #fff

}.tag-top {

  top: 44px;

  left: 0;

  transform: rotate(-5deg)

}.tag-bottom {

  bottom: 53px;

  right: -5px;

  animation-delay: -2s;

  transform: rotate(4deg)

}.floating-spark {

  position: absolute;

  color: var(--red);

  font-size: 36px

}.spark-one {

  top: 76px;

  right: 22px;

  animation: spin 12s linear infinite

}.spark-two {

  bottom: 72px;

  left: 8px;

  color: #111;

  font-size: 26px

}.idea-chip {

  position: absolute;

  left: 8%;

  bottom: 14px;

  display: flex;

  align-items: center;

  gap: 8px;

  padding: 9px 13px;

  border: 1px solid #d8d5ce;

  background: #fdfcf9;

  font-size: 8px;

  letter-spacing: 1.4px;

  font-weight: 700;

  transform: rotate(2deg)

}.idea-chip span {

  color: var(--red);

  font-size: 17px

}.idea-chip .fa-spinner {

  animation: spin 1.2s linear infinite

}.idea-chip b {

  color: var(--red)

}.hero-bottom-note {

  position: absolute;

  bottom: 22px;

  left: 0;

  right: 0;

  display: flex;

  align-items: center;

  gap: 15px;

  color: #999;

  font-size: 8px;

  letter-spacing: 1.5px

}.scroll-line {

  width: 42px;

  height: 1px;

  background: var(--red)

}.hero-bottom-note span:last-child {

  margin-left: auto

}.intro-strip {

  background: var(--red);

  color: #fff;

  overflow: hidden

}.strip-inner {

  min-height: 74px;

  display: flex;

  align-items: center;

  gap: 25px

}.strip-inner>span:first-child, .strip-inner>span:last-child {

  font-size: 10px;

  letter-spacing: 2px;

  font-weight: 700

}.strip-inner strong {

  font: 800 clamp(19px, 2.6vw, 28px) var(--display);

  letter-spacing: -1px

}.strip-star {

  font-size: 26px;

  margin-left: auto

}.section-pad {

  padding: 118px 0

}.section-kicker {

  display: flex;

  align-items: center;

  gap: 10px

}.section-kicker span {

  color: var(--red)

}.about-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 80px;

  margin-top: 34px

}.about-heading h2, .section-heading-row h2, .why-copy h2, .cta-content h2 {

  font: 800 clamp(40px, 4.6vw, 61px)/1.1 var(--display);

  letter-spacing: -3px;

  margin: 0

}.serif-accent {

  font-family: Georgia, serif;

  font-weight: 400;

  font-style: italic;

  letter-spacing: -2px;

  color: var(--red)

}.red-rule {

  height: 5px;

  width: 72px;

  background: var(--red);

  margin-top: 28px

}.about-copy {

  padding-top: 3px;

  max-width: 570px

}.about-copy p {

  color: #6f6d69;

  font-size: 15px;

  line-height: 1.9;

  margin: 0 0 16px

}.about-copy p.lead {

  font-size: 20px;

  line-height: 1.55;

  color: #181818;

  font-weight: 700

}.inline-arrow {

  display: inline-flex;

  align-items: center;

  gap: 22px;

  margin-top: 12px;

  padding-bottom: 7px;

  border-bottom: 1px solid var(--red);

  font-size: 13px;

  font-weight: 700

}.inline-arrow span {

  font-size: 19px;

  color: var(--red);

  transition: transform .2s

}.inline-arrow:hover span {

  transform: translate(4px, -4px)

}.values-row {

  display: grid;

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

  border-top: 1px solid var(--line);

  margin-top: 74px;

  padding-top: 25px;

  gap: 25px

}.values-row>div {

  display: grid;

  grid-template-columns: 38px 1fr;

  column-gap: 12px;

  align-items: start

}.value-number {

  grid-row: span 2;

  color: var(--red);

  font-size: 11px;

  font-weight: 700

}.values-row b {

  font-size: 13px

}.values-row small {

  color: #85837e;

  font-size: 11px;

  margin-top: 3px

}.services-section {

  background: #eeede8

}.section-heading-row {

  display: flex;

  align-items: end;

  justify-content: space-between;

  gap: 35px;

  margin: 28px 0 45px

}.section-heading-row>p {

  max-width: 330px;

  color: #777;

  font-size: 14px;

  line-height: 1.8;

  margin: 0 0 5px

}.why-section {

  background: var(--paper)

}.why-grid {

  display: grid;

  grid-template-columns: .92fr 1.08fr;

  gap: 105px;

  align-items: center

}.why-visual {

  position: relative;

  padding: 20px 25px 25px 0

}.why-image-frame {

  background: #111;

  color: #fff;

  min-height: 465px;

  padding: 19px 22px;

  position: relative;

  overflow: hidden;
  isolation: isolate

}.why-image-top, .why-image-bottom {

  display: flex;

  justify-content: space-between;

  align-items: center;

  font-size: 8px;

  letter-spacing: 1.7px;

  color: #9d9d9d

}.why-image-top span:last-child {

  color: var(--red);

  font-size: 20px;
  animation: approach-wand 4s ease-in-out infinite

}.why-graphic {

  height: 365px;

  position: relative;

  display: grid;

  place-items: center

}.graphic-ring {

  width: 275px;

  height: 275px;

  border: 1px solid #464646;

  border-radius: 50%;

  position: absolute;
  animation: approach-ring 6s ease-in-out infinite

}.graphic-ring:before, .graphic-ring:after {

  content: "";

  position: absolute;

  inset: 22px;

  border: 1px dashed #444;

  border-radius: 50%

}.graphic-ring:after {

  inset: -18px;

  border-color: #2e2e2e;
  animation: approach-ring 8s ease-in-out -2s infinite reverse

}.graphic-core {

  width: 155px;

  height: 155px;

  border-radius: 50%;

  display: grid;

  place-items: center;

  background: radial-gradient(circle at var(--shine-x, 38%) var(--shine-y, 28%), #ff6873 0, #f0182d 42%, #d80f28 100%);
  font: 800 85px var(--display);

  box-shadow: 0 0 0 14px #f0182d17, 0 0 70px #f0182d4d;

  z-index: 1;
  transform: perspective(420px) translate3d(var(--pointer-x, 0), var(--pointer-y, 0), 0) rotateX(var(--pointer-rotate-x, 0)) rotateY(var(--pointer-rotate-y, 0));
  transform-style: preserve-3d;
  transition: transform .24s cubic-bezier(.18, .75, .25, 1), background-position .24s ease-out;
  will-change: transform;
  animation: approach-ball-glow 3s ease-in-out infinite;
  isolation: isolate
}.graphic-letter {
  position: relative;
  z-index: 1;
  display: inline-block;
  color: #fff;
  text-shadow: 0 3px 0 #a80d21, 0 7px 16px #77081766;
  transform: translateZ(18px);
  transition: transform .24s cubic-bezier(.18, .75, .25, 1)
}.graphic-letter > span {

  color: #d7ff65

}.graphic-label {

  position: absolute;

  font-size: 9px;

  line-height: 1.6;

  letter-spacing: 1.3px;

  color: #d5d5d5;

  z-index: 2;
  animation: approach-label 4s ease-in-out infinite

}.label-a {

  top: 42px;

  left: 28px

}.label-b {

  right: 12px;

  top: 100px;
  animation-delay: -1.3s

}.label-c {

  bottom: 35px;

  left: 42px;
  animation-delay: -2.6s

}.graphic-cross {

  position: absolute;

  bottom: 35px;

  right: 38px;

  color: #d7ff65;

  font-size: 30px;
  animation: approach-cross 3.2s ease-in-out infinite

}.why-image-bottom {

  border-top: 1px solid #333;

  padding-top: 15px

}.long-dash {

  height: 1px;

  width: 50px;

  background: var(--red)

}.why-sticker {

  position: absolute;

  right: 0;

  bottom: 0;

  background: var(--lime);

  color: #111;

  padding: 16px 19px;

  font: 700 12px/1.25 var(--display);

  letter-spacing: 1px;

  transform: rotate(5deg);

  box-shadow: 5px 5px 0 #111;
  animation: approach-sticker 4s ease-in-out infinite
}

@keyframes approach-wand {0%, 100% { transform: rotate(-8deg) scale(1) }50% { transform: rotate(8deg) scale(1.12) }
}

@keyframes approach-ring {0%, 100% { scale: 1; opacity: 1 }50% { scale: 1.035; opacity: .72 }
}

@keyframes approach-ball-glow {0%, 100% { box-shadow: 0 0 0 14px #f0182d17, 0 0 70px #f0182d4d }50% { box-shadow: 0 0 0 20px #f0182d12, 0 0 90px #f0182d66 }
}

@keyframes approach-label {0%, 100% { translate: 0 0 }50% { translate: 0 -6px }
}

@keyframes approach-cross {0%, 100% { translate: 0 0; rotate: 0deg }50% { translate: 0 -9px; rotate: 90deg }
}

@keyframes approach-sticker {0%, 100% { translate: 0 0; rotate: 5deg }50% { translate: 0 -7px; rotate: 2deg }
}.why-sticker b {

  font-size: 16px

}.why-copy h2 {

  margin-top: 26px

}.why-intro {

  color: #777;

  font-size: 14px;

  line-height: 1.8;

  margin: 22px 0 28px;

  max-width: 500px

}.reason-list {

  display: grid;

  gap: 0

}.reason {

  display: grid;

  grid-template-columns: 40px 1fr;

  gap: 12px;

  padding: 17px 0;

  border-top: 1px solid var(--line)

}.reason>span {

  width: 29px;

  height: 29px;

  display: grid;

  place-items: center;

  background: #f8dfe1;

  color: var(--red);

  border-radius: 50%;

  font-size: 15px

}.reason h3 {

  font: 750 14px var(--display);

  margin: 0 0 5px

}.reason p {

  font-size: 12px;

  line-height: 1.7;

  color: #777;

  margin: 0

}.projects-section {

  background: #e9e8e2

}.project-grid {

  display: grid;

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

  gap: 16px

}.project-card {

  display: block;

  background: var(--paper);

  padding: 17px 17px 0;

  border: 1px solid #dedcd5;

  overflow: hidden;

  transition: transform .3s, box-shadow .3s

}.project-card:hover {

  transform: translateY(-6px);

  box-shadow: 0 18px 40px #0000000d

}.project-art {
  height: 275px;
  margin-top: 23px;
  overflow: hidden;
  background: var(--paper)
}.project-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: project-image-float 5s ease-in-out infinite;
  transition: transform .45s cubic-bezier(.2, .7, .2, 1), filter .45s ease;
  will-change: transform
}.project-card:hover .project-art img {
  animation-play-state: paused;
  transform: translateY(-5px) scale(1.055);
  filter: drop-shadow(0 12px 10px #00000018)
}.project-card:nth-child(2) .project-art img {
  animation-delay: -1.7s
}.project-card:nth-child(3) .project-art img {
  animation-delay: -3.2s
}

@keyframes project-image-float {0%, 100% { transform: translateY(0) scale(1) }50% { transform: translateY(-7px) scale(1.015) }
}.project-topline {

  display: flex;

  justify-content: space-between;

  font-size: 8px;

  letter-spacing: 1.5px;

  font-weight: 700;

  color: #8a8882

}.project-topline span:last-child {

  color: var(--red);

  font-size: 16px

}.browser-mock {

  height: 275px;

  background: #e0e5ef;

  margin-top: 23px;

  padding: 10px 10px 0;

  overflow: hidden;

  position: relative

}.browser-bar {

  height: 23px;

  background: #fff;

  border-radius: 4px 4px 0 0;

  display: flex;

  align-items: center;

  gap: 4px;

  padding: 0 8px

}.browser-bar i {

  width: 5px;

  height: 5px;

  border-radius: 50%;

  background: #d6d4d0

}.browser-bar span {

  font-size: 6px;

  color: #999;

  margin: auto

}.browser-body {

  position: relative;

  height: 240px;

  background: #f8f8f6;

  padding: 30px 17px

}.mock-nav {

  width: 100%;

  height: 5px;

  background: #171717;

  opacity: .7

}.mock-title {

  width: 62%;

  height: 17px;

  background: #111;

  margin-top: 25px

}.mock-subtitle {

  width: 78%;

  height: 5px;

  background: #b3b3b3;

  margin-top: 10px

}.mock-button {

  width: 67px;

  height: 17px;

  background: var(--red);

  margin-top: 17px

}.mock-orb {

  position: absolute;

  width: 115px;

  height: 115px;

  border-radius: 50%;

  background: var(--red);

  right: 15px;

  top: 66px;

  box-shadow: inset -20px -8px 0 #c20e25

}.mock-card {

  position: absolute;

  bottom: 13px;

  left: 17px;

  width: 58%;

  height: 40px;

  background: #d7ff65;

  border: 1px solid #111

}.project-app .browser-mock {

  display: none

}.phone-mock {

  width: 145px;

  height: 255px;

  border: 5px solid #111;

  border-radius: 23px;

  margin: 24px auto 19px;

  background: #111;

  padding: 5px;

  transform: rotate(5deg);

  box-shadow: 12px 13px 0 #1111

}.phone-speaker {

  display: none

}.phone-screen {

  height: 100%;

  border-radius: 16px;

  background: #f7f6f3;

  padding: 19px 12px;

  position: relative;

  overflow: hidden

}.phone-brand {

  font: 800 14px var(--display)

}.phone-brand span {

  color: var(--red)

}.phone-big {

  font: 800 23px/1.05 var(--display);

  letter-spacing: -1px;

  margin-top: 22px;

  position: relative;

  z-index: 2

}.phone-big em {

  font-family: Georgia, serif;

  color: var(--red);

  font-weight: 400

}.phone-tile {

  position: absolute;

  display: grid;

  place-items: center;

  font-size: 27px

}.tile-one {

  width: 70px;

  height: 70px;

  right: -7px;

  top: 105px;

  background: var(--red);

  color: #fff;

  transform: rotate(13deg)

}.tile-two {

  width: 56px;

  height: 56px;

  left: -9px;

  bottom: 42px;

  background: #d7ff65;

  color: #111;

  transform: rotate(-12deg)

}.phone-cta {

  position: absolute;

  bottom: 14px;

  left: 12px;

  font-size: 7px;

  letter-spacing: 1px;

  font-weight: 700

}.book-stack {

  height: 275px;

  display: flex;

  align-items: center;

  justify-content: center;

  position: relative;

  margin-top: 23px;

  perspective: 500px

}.book {

  height: 207px;

  width: 137px;

  position: absolute;

  box-shadow: 9px 9px 0 #00000015;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  padding: 15px 12px;

  font-family: var(--display)

}.book-back {

  background: #d7ff65;

  color: #111;

  transform: translate(22px, -5px) rotate(9deg);

  font-size: 16px;

  font-weight: 800;

  line-height: 1.1;

  padding-top: 28px

}.book-front {

  background: #111;

  color: #fff;

  transform: translate(-14px, 2px) rotate(-7deg);

  border-left: 7px solid var(--red)

}.book-front>span {

  font-size: 7px;

  letter-spacing: 1.5px

}.book-front>b {

  font-size: 26px;

  line-height: .95;

  letter-spacing: -1px

}.book-front em {

  font-style: normal;

  color: var(--lime)

}.book-front small {

  font-size: 5px;

  letter-spacing: .7px;

  color: #aaa

}.book-shadow {

  position: absolute;

  width: 230px;

  height: 16px;

  background: #0002;

  filter: blur(10px);

  bottom: 10px

}.project-meta {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 19px 2px 22px

}.project-meta h3 {

  font: 750 16px var(--display);

  letter-spacing: -.4px;

  margin: 0 0 5px

}.project-meta p {

  font-size: 10px;

  color: #777;

  margin: 0

}.project-arrow {

  font-size: 23px;

  color: var(--red);

  transition: transform .2s

}.project-card:hover .project-arrow {

  transform: translate(3px, -3px)

}.portfolio-note {

  font-size: 10px;

  color: #777;

  margin: 18px 0 0

}.portfolio-note a {

  font-weight: 700;

  color: #111;

  border-bottom: 1px solid var(--red)

}.cta-section {

  padding-top: 105px;

  padding-bottom: 105px

}.cta-box {

  min-height: 400px;

  background: var(--red);

  color: #fff;

  position: relative;

  overflow: hidden;

  padding: 65px 75px;

  display: flex;

  align-items: center;

  justify-content: space-between

}.cta-content {

  position: relative;

  z-index: 2

}.cta-content .section-kicker {

  color: #ffd5d8

}.cta-content .section-kicker span {

  color: #fff

}.cta-content h2 {

  margin: 24px 0 15px

}.cta-content .serif-accent {

  color: #111

}.cta-content p {

  color: #ffe5e7;

  font-size: 14px;

  margin: 0 0 25px

}.btn-light {

  background: #fff;

  color: #111;

  box-shadow: 5px 5px 0 #111

}.btn-light:hover {

  background: var(--lime)

}.cta-side-note {

  position: relative;

  z-index: 2;

  display: flex;

  align-items: center;

  gap: 14px;

  font-size: 9px;

  line-height: 1.7;

  letter-spacing: 1.5px;

  font-weight: 700

}.cta-star {

  font-size: 68px;

  color: #111;

  animation: spin 18s linear infinite

}.cta-orbit {

  position: absolute;

  border: 1px solid #ffffff45;

  border-radius: 50%;

  pointer-events: none

}.cta-orbit-a {

  width: 500px;

  height: 500px;

  right: -90px;

  top: -100px

}.cta-orbit-b {

  width: 370px;

  height: 370px;

  right: -25px;

  top: -35px;

  border-style: dashed

}.reveal {

  opacity: 0;

  transform: translateY(22px);

  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1)

}.reveal.is-visible {

  opacity: 1;

  transform: translateY(0)

}.project-grid>*:nth-child(2) {

  transition-delay: .08s

}.project-grid>*:nth-child(3) {

  transition-delay: .16s

}

@keyframes float {0%, 100% {

    translate: 0 0

  }50% {

    translate: 0 -10px

  }

}

@keyframes spin {to {

    transform: rotate(360deg)

  }

}

@media(max-width:1050px) {.hero {

    gap: 15px

  }.hero h1 {

    font-size: clamp(45px, 5.7vw, 64px);

    letter-spacing: -3px

  }.hero-art {

    transform: scale(.91)

  }.why-grid {

    gap: 55px

  }.section-pad {

    padding: 95px 0

  }.cta-box {

    padding: 55px

  }

}

@media(max-width:820px) {.section-shell {

    width: min(100% - 40px, var(--max))

  }.hero {

    grid-template-columns: 1fr;

    padding-top: 70px;

    padding-bottom: 85px;

    gap: 10px

  }.hero-copy {

    padding-bottom: 0

  }.hero h1 {

    max-width: 650px;

    font-size: clamp(48px, 9vw, 76px)

  }.hero-lede {

    max-width: 620px

  }.hero-art {

    min-height: 490px;

    margin-top: 8px;

    transform: none

  }.creative-board {

    width: min(82%, 450px)

  }.hero-bottom-note {

    bottom: 20px

  }.about-grid {

    gap: 35px

  }.why-grid {

    grid-template-columns: 1fr;

    gap: 65px

  }.why-visual {

    max-width: 520px;

    width: 100%;

    margin: auto

  }.why-copy {

    max-width: 680px

  }.project-grid {

    gap: 10px

  }.project-card {

    padding: 13px 13px 0

  }.browser-mock, .book-stack {

    height: 230px

  }.phone-mock {

    transform: scale(.87) rotate(5deg);

    margin-top: 9px;

    margin-bottom: 4px

  }

}

@media(max-width:600px) {.section-shell {

    width: calc(100% - 36px)

  }.hero {

    padding-top: 58px;

    min-height: auto

  }.eyebrow {

    font-size: 9px;

    letter-spacing: 1.5px;

    margin-bottom: 19px

  }.hero h1 {

    font-size: clamp(43px, 12vw, 62px);

    letter-spacing: -2.9px

  }.hero-lede {

    font-size: 14px;

    line-height: 1.8;

    margin: 20px 0 25px

  }.hero-actions {

    gap: 18px

  }.btn {

    min-height: 50px;

    padding: 0 17px;

    gap: 16px;

    font-size: 12px

  }.text-link {

    font-size: 11px

  }.hero-proof {

    margin-top: 32px

  }.hero-art {

    min-height: 365px;

    margin: 0 -8px

  }.creative-board {

    height: 270px;

    width: 83%;

    box-shadow: 12px 14px 0 #e8e5de, 0 20px 35px #00000016

  }.board-top {

    height: 34px;

    padding: 0 12px

  }.board-content {

    padding: 15px 13px 9px;

    min-height: 190px

  }.board-copy>b {

    font-size: 37px

  }.board-copy small {

    font-size: 7px

  }.shape-stage {

    height: 150px;

    transform: scale(.8);

    transform-origin: center

  }.shape-circle {

    width: 105px;

    height: 105px;

    right: -3px

  }.shape-square {

    width: 70px;

    height: 70px;

    right: 51px;

    top: 50px

  }.shape-pill {

    width: 61px;

    height: 61px;

    right: 7px;

    top: 73px;

    font-size: 33px

  }.board-footer {

    padding: 10px 12px;

    font-size: 6px

  }.floating-tag {

    padding: 8px 10px;

    gap: 7px

  }.tag-icon {

    width: 27px;

    height: 27px;

    font-size: 14px

  }.floating-tag b {

    font-size: 9px

  }.floating-tag small {

    font-size: 8px

  }.tag-top {

    top: 20px;

    left: 0

  }.tag-bottom {

    bottom: 29px;

    right: 0

  }.orbit-one {

    width: 340px;

    height: 240px

  }.orbit-two {

    width: 300px;

    height: 330px

  }.idea-chip {

    bottom: 2px;

    left: 5%;

    font-size: 7px;

    padding: 6px 9px

  }.hero-bottom-note {

    font-size: 6px;

    letter-spacing: 1px;

    gap: 8px

  }.scroll-line {

    width: 22px

  }.intro-strip .section-shell {

    width: 100%;

    padding: 0 18px

  }.strip-inner {

    min-height: 66px;

    gap: 12px

  }.strip-inner>span:first-child, .strip-inner>span:last-child {

    font-size: 7px;

    letter-spacing: 1px

  }.strip-inner strong {

    font-size: 16px;

    line-height: 1.2

  }.strip-star {

    font-size: 20px

  }.section-pad {

    padding: 76px 0

  }.section-kicker {

    font-size: 9px;

    letter-spacing: 1.5px

  }.about-grid {

    grid-template-columns: 1fr;

    gap: 22px;

    margin-top: 25px

  }.about-heading h2, .section-heading-row h2, .why-copy h2, .cta-content h2 {

    font-size: clamp(38px, 10vw, 52px);

    letter-spacing: -2px

  }.about-copy p {

    font-size: 13px

  }.about-copy p.lead {

    font-size: 18px

  }.values-row {

    grid-template-columns: 1fr;

    gap: 17px;

    margin-top: 43px

  }.values-row>div {

    grid-template-columns: 28px 1fr

  }.values-row small {

    font-size: 10px

  }.section-heading-row {

    display: block;

    margin: 23px 0 30px

  }.section-heading-row>p {

    font-size: 12px;

    margin-top: 17px

  }.why-grid {

    gap: 50px

  }.why-visual {

    padding: 8px 13px 18px 0

  }.why-image-frame {

    min-height: 380px;

    padding: 15px

  }.why-graphic {

    height: 300px

  }.graphic-ring {

    width: 220px;

    height: 220px

  }.graphic-core {

    width: 125px;

    height: 125px;

    font-size: 70px

  }.label-a {

    top: 35px;

    left: 10px

  }.label-b {

    right: 0;

    top: 70px

  }.label-c {

    bottom: 20px;

    left: 15px

  }.graphic-cross {

    bottom: 22px;

    right: 19px

  }.why-image-bottom {

    font-size: 6px

  }.why-sticker {

    padding: 12px;

    font-size: 10px

  }.why-intro {

    font-size: 12px

  }.reason {

    grid-template-columns: 32px 1fr;

    gap: 9px;

    padding: 14px 0

  }.reason h3 {

    font-size: 12px

  }.reason p {

    font-size: 10px

  }.project-grid {

    grid-template-columns: 1fr;

    gap: 14px

  }.project-card {

    padding: 15px 15px 0

  }.browser-mock, .book-stack, .project-art {

    height: 255px

  }.browser-body {

    height: 220px

  }.phone-mock {

    transform: rotate(5deg) scale(.94);

    margin: 12px auto 12px

  }.project-meta {

    padding: 16px 2px 18px

  }.project-meta h3 {

    font-size: 15px

  }.project-meta p {

    font-size: 10px

  }.portfolio-note {

    font-size: 9px;

    line-height: 1.7

  }.cta-section {

    padding: 72px 0

  }.cta-box {

    min-height: 440px;

    padding: 42px 25px;

    align-items: flex-start

  }.cta-content h2 {

    margin-top: 22px

  }.cta-content p {

    font-size: 12px;

    max-width: 280px;

    line-height: 1.8

  }.cta-side-note {

    position: absolute;

    bottom: 25px;

    right: 22px;

    font-size: 7px

  }.cta-star {

    font-size: 40px

  }.cta-orbit-a {

    width: 350px;

    height: 350px;

    right: -180px;

    top: 100px

  }.cta-orbit-b {

    width: 260px;

    height: 260px;

    right: -130px;

    top: 140px

  }

}

@media(prefers-reduced-motion:reduce) {*, *::before, *::after {

    scroll-behavior: auto !important;

    animation-duration: .01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: .01ms !important

  }.reveal {

    opacity: 1;

    transform: none

  }

}/* Generated hero artwork integration */

.hero-art-image {

  min-height: 0;

  display: block;

  align-self: center;

  position: relative;

  border-radius: 18px;

  isolation: isolate;

  overflow: visible;

  background: #090909;

  box-shadow: 0 28px 70px rgba(0, 0, 0, .17);

}.hero-art-image .hero-image-glow {

  position: absolute;

  inset: 8% 5%;

  background: radial-gradient(ellipse at 72% 42%, rgba(240, 24, 45, .35), transparent 53%), radial-gradient(ellipse at 28% 75%, rgba(215, 255, 101, .18), transparent 48%);

  filter: blur(30px);

  z-index: -1;

  pointer-events: none;

}.hero-visual-image {

  display: block;

  width: 100%;

  height: auto;

  aspect-ratio: 3/2;

  object-fit: contain;

  border-radius: 18px;

  position: relative;

  z-index: 1;

}.image-caption {

  position: absolute;

  z-index: 2;

  left: 18px;

  bottom: 16px;

  display: flex;

  align-items: center;

  gap: 8px;

  background: rgba(10, 10, 10, .8);

  color: #eee;

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

  padding: 9px 12px;

  font-size: 8px;

  letter-spacing: 1.5px;

  border-radius: 3px;

  backdrop-filter: blur(10px);

}.image-caption i {

  color: var(--red);

  font-size: 12px

}.reason>span i {

  font-size: 13px

}.play-icon i {

  font-size: 9px

}.btn span i {

  font-size: 13px

}

@media(max-width:820px) {.hero-art-image {

    width: min(100%, 650px);

    margin: 15px auto 0

  }

}

@media(max-width:600px) {.hero-art-image {

    margin: 8px -2px 0;

    border-radius: 12px

  }.hero-visual-image {

    border-radius: 12px

  }.image-caption {

    left: 9px;

    bottom: 9px;

    padding: 7px 9px;

    font-size: 6px

  }

}/* Hero artwork sizing: keep the board and surrounding floating elements aligned. */
.hero-art-image {
  display: none !important;
}.hero-art .board-with-image {
  width: min(100%, 500px);
  height: auto;
  aspect-ratio: 450 / 345;
  padding: 0;
  border-radius: 5px;
  overflow: hidden;
  transform: rotate(-4deg);
  position: relative;
  z-index: 2;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}.hero-art:hover .board-with-image {
  transform: rotate(-1deg) translateY(-7px);
}.board-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 1000px) {.hero-art .board-with-image {
    width: min(100%, 420px);
  }
}

@media (max-width: 820px) {.hero-art .board-with-image {
    width: min(100%, 450px);
    height: auto;
    aspect-ratio: 450 / 345;
  }
}
.clients-section {
  overflow: hidden;
  background: #fff;
}

.clients-section .section-heading-row {
  margin-bottom: 32px;
}

.clients-slider {
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
}

.clients-slider-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.4px;
}

.clients-slider-toggle {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  cursor: pointer;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}

.clients-slider-toggle:hover,
.clients-slider-toggle:focus-visible {
  color: #fff;
  background: var(--ink);
  border-color: var(--ink);
}

.clients-slider-viewport {
  overflow: hidden;
  padding: 8px 0 14px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}

.clients-slider-track {
  display: flex;
  width: max-content;
  animation: clients-logo-scroll 36s linear infinite;
}

.clients-logo-group {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 28px;
  padding: 0 28px 0 0;
  margin: 0;
  list-style: none;
}

.clients-logo-group li {
  display: grid;
  width: 190px;
  height: 128px;
  flex: 0 0 190px;
  place-items: center;
  padding: 12px 18px;
}

.clients-logo-group img {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  object-position: center;
}

.clients-slider:hover .clients-slider-track,
.clients-slider.is-paused .clients-slider-track {
  animation-play-state: paused;
}

@keyframes clients-logo-scroll {
  to {
    transform: translateX(-50%);
  }
}

@media (max-width: 600px) {
  .clients-logo-group {
    gap: 16px;
    padding-right: 16px;
  }

  .clients-logo-group li {
    width: 148px;
    height: 108px;
    flex-basis: 148px;
    padding: 10px 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .clients-slider-track {
    width: 100%;
    animation: none;
    transform: none;
  }

  .clients-logo-group {
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    padding: 0;
  }

  .clients-logo-group[aria-hidden="true"] {
    display: none;
  }
}