:root {
  --ink: #111426;
  --paper: #fafafc;
  --purple: #6437ff;
  --violet: #9447ff;
  --text: #12131a;
  --body: #5f6068;
  --muted: #858793;
  --line: #dedfe6;
  --darkline: #343647;
  --lav: #f0edff;
  --sans: Manrope, Arial, sans-serif;
  --mono: "DM Mono", monospace;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--sans);
  overflow-x: hidden;
}
.wrap {
  width: min(1190px, calc(100% - 64px));
  margin: auto;
}
.grain {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: 0.025;
  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='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.skip {
  position: absolute;
  left: -999px;
}
.skip:focus {
  left: 10px;
  top: 10px;
  z-index: 30;
  background: var(--purple);
  color: #fff;
  padding: 8px;
}
.header {
  height: 82px;
  position: sticky;
  top: 0;
  z-index: 15;
  background: #fafafcd9;
  backdrop-filter: blur(14px);
  transition: height 0.3s;
  border-bottom: 1px solid transparent;
}
.header.scrolled {
  height: 67px;
  border-color: var(--line);
}
.nav {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 32px;
}
.logo {
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -1.8px;
  color: var(--purple);
  text-decoration: none;
}
.logo span {
  color: var(--violet);
}
.navlinks {
  margin-left: auto;
  display: flex;
  gap: 26px;
}
.navlinks a,
.footer a {
  font-size: 13px;
  color: var(--body);
  text-decoration: none;
}
.navlinks a:hover,
.footer a:hover {
  color: var(--purple);
}
.nav-cta {
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  background: var(--ink);
  color: #fff;
  padding: 12px 15px;
}
.nav-cta b {
  color: #c6ff59;
  margin-left: 7px;
}
.hamburger,
.mobile-menu {
  display: none;
}
.eyebrow {
  font: 12px var(--mono);
  letter-spacing: 0.12em;
  color: var(--purple);
  margin: 0;
}
.eyebrow i {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--purple);
  box-shadow: 0 0 0 4px #ebe7ff;
}
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  min-height: 670px;
  padding: 52px 0;
}
.hero h1,
h2,
h3 {
  letter-spacing: -0.075em;
}
.hero h1 {
  font-size: clamp(55px, 6.4vw, 91px);
  line-height: 0.9;
  margin: 23px 0;
}
.line {
  display: block;
}
.hero h1 em,
h2 span {
  font-style: normal;
  color: var(--purple);
}
.lede {
  font-size: 18px;
  line-height: 1.7;
  color: var(--body);
  max-width: 490px;
  margin: 0;
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 27px;
  margin-top: 31px;
}
.button {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  padding: 16px 19px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  transition: 0.25s;
}
.main-button {
  background: linear-gradient(100deg, var(--purple), var(--violet));
  color: #fff;
}
.main-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 25px #6437ff35;
}
.main-button b {
  font-size: 19px;
  font-weight: 400;
}
.quiet-link,
.arrow-link {
  padding-bottom: 7px;
  border-bottom: 1px solid currentColor;
  color: var(--text);
  text-decoration: none;
  font: 12px var(--mono);
}
.quiet-link b,
.arrow-link b {
  color: var(--purple);
  font-size: 16px;
  margin-left: 8px;
}
.hero-world {
  height: 480px;
  position: relative;
  isolation: isolate;
}
.hero-grid,
.contact-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(#673cff0d 1px, transparent 1px),
    linear-gradient(90deg, #673cff0d 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(circle, black, transparent 70%);
}
.artifact {
  position: absolute;
  background: #fff;
  border: 1px solid #dddaf1;
  box-shadow: 0 25px 60px #17132616;
}
.artifact small {
  font: 11px var(--mono);
  color: var(--purple);
  letter-spacing: 0.1em;
}
.performance {
  left: 12px;
  top: 78px;
  width: 296px;
  padding: 25px;
  rotate: -5deg;
  animation: drift 7s ease-in-out infinite;
}
.performance strong {
  display: block;
  margin: 23px 0 5px;
  font-size: 67px;
  letter-spacing: -0.1em;
  line-height: 1;
}
.performance strong i {
  font-size: 26px;
  font-style: normal;
  color: var(--violet);
}
.performance p,
.roas span {
  font: 12px var(--mono);
  color: var(--body);
  margin: 0;
}
.chart {
  height: 56px;
  margin: 20px 0 10px;
  display: flex;
  align-items: end;
  gap: 6px;
}
.chart i {
  width: 18px;
  background: var(--purple);
  transform-origin: bottom;
  animation: bar 1.7s ease-in-out infinite alternate;
}
.chart i:nth-child(1) {
  height: 18%;
}
.chart i:nth-child(2) {
  height: 35%;
}
.chart i:nth-child(3) {
  height: 25%;
}
.chart i:nth-child(4) {
  height: 57%;
}
.chart i:nth-child(5) {
  height: 47%;
}
.chart i:nth-child(6) {
  height: 72%;
}
.chart i:nth-child(7) {
  height: 100%;
  background: var(--violet);
}
.performance footer {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font: 10px var(--mono);
}
.creative {
  width: 220px;
  height: 193px;
  right: 18px;
  top: 122px;
  padding: 21px;
  background: #171a2a;
  color: #fff;
  rotate: 6deg;
  animation: drift 7s 1s ease-in-out infinite;
}
.creative b {
  display: block;
  margin-top: 27px;
  font-size: 37px;
  line-height: 0.86;
  letter-spacing: -0.09em;
}
.creative em {
  color: #c5ff5d;
}
.serial {
  position: absolute;
  bottom: 18px;
  color: #b8bbc4;
  font: 9px var(--mono);
}
.roas {
  right: 67px;
  bottom: 25px;
  width: 156px;
  padding: 17px;
  rotate: -8deg;
  animation: drift 7s 2s ease-in-out infinite;
}
.roas b {
  display: block;
  margin: 15px 0 7px;
  font-size: 46px;
  letter-spacing: -0.1em;
  line-height: 1;
}
.roas i {
  font-size: 21px;
  color: var(--violet);
  font-style: normal;
}
.orbit-text {
  position: absolute;
  z-index: -1;
  left: 92px;
  top: 49px;
  width: 356px;
  height: 356px;
  padding: 28px;
  border: 1px solid #673cff2a;
  border-radius: 50%;
  color: #7149ff;
  font: 9px var(--mono);
  letter-spacing: 0.2em;
  writing-mode: vertical-rl;
  animation: spin 25s linear infinite;
}
.dot {
  position: absolute;
  z-index: -1;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--purple);
}
.dot-a {
  left: 9px;
  bottom: 94px;
}
.dot-b {
  right: 18px;
  top: 72px;
  background: #c5ff5d;
}
.trust {
  padding: 28px 0 105px;
  border-top: 1px solid var(--line);
}
.trust-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin: 35px 0 47px;
}
.trust h2 {
  font-size: clamp(34px, 4vw, 55px);
  line-height: 0.98;
  margin: 0;
}
.trust-head p {
  max-width: 290px;
  margin: 0;
  color: var(--body);
  font-size: 16px;
  line-height: 1.65;
}
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
}
.stats div {
  padding: 20px 0 0 24px;
  border-left: 1px solid var(--line);
}
.stats strong {
  font-size: 47px;
  letter-spacing: -0.1em;
  color: var(--purple);
}
.stats strong span {
  font-size: 22px;
}
.stats p {
  color: var(--body);
  font: 12px var(--mono);
  margin: 8px 0;
}
.section {
  padding: 125px 0;
}
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 85px;
}
.two-col h2,
.section-title h2 {
  font-size: clamp(43px, 5vw, 72px);
  line-height: 0.94;
  margin: 15px 0 0;
}
.copy {
  align-self: end;
}
.copy p {
  margin: 0 0 20px;
  color: var(--body);
  font-size: 18px;
  line-height: 1.75;
}
.principles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 78px;
  border-top: 1px solid var(--line);
}
.principles article {
  min-height: 192px;
  padding: 21px;
  border-left: 1px solid var(--line);
}
.principles article:last-child {
  border-right: 1px solid var(--line);
}
.principles b,
.difference-grid b {
  font: 12px var(--mono);
  color: var(--purple);
}
.principles h3,
.difference-grid h3 {
  margin: 47px 0 8px;
  font-size: 17px;
}
.principles p,
.difference-grid p {
  margin: 0;
  color: var(--body);
  font-size: 14px;
  line-height: 1.65;
}
.services,
.different {
  background: var(--ink);
  color: #fff;
}
.section-title {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 55px;
}
.section-title > p:last-child {
  max-width: 300px;
  margin: 0;
  color: var(--body);
  font-size: 15px;
  line-height: 1.7;
}
.service-list {
  border-top: 1px solid var(--darkline);
}
.work-title {
  align-items: end;
}
.case-study {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  min-height: 450px;
  margin-top: 50px;
  border-top: 1px solid var(--line);
  transition: border-color 0.35s;
}
.case-study:hover {
  border-color: #a997ff;
}
.case-info {
  align-self: center;
  padding: 41px 45px 35px 0;
}
.case-info h3 {
  margin: 18px 0;
  font-size: 31px;
  line-height: 1.03;
  transition: translate 0.35s;
}
.case-study:hover .case-info h3 {
  translate: 6px 0;
}
.case-info > p:not(.eyebrow) {
  color: var(--body);
  font-size: 16px;
  line-height: 1.7;
}
.case-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 23px 0;
}
.case-meta span {
  padding: 7px 9px;
  border: 1px solid var(--line);
  font: 11px var(--mono);
}
.case-art {
  position: relative;
  min-height: 410px;
  overflow: hidden;
}
.vash-art {
  display: grid;
  place-items: center;
  background: #e3e0d8;
}
.poster {
  position: relative;
  width: 230px;
  height: 300px;
  padding: 20px;
  rotate: -4deg;
  background: #20201f;
  color: #eee8d9;
  box-shadow: 17px 17px 0 #bdac91;
  transition: 0.5s;
}
.case-study:hover .poster {
  rotate: 0;
  scale: 1.04;
}
.poster small {
  color: #ccff60;
  font: 10px var(--mono);
}
.poster b {
  display: block;
  margin-top: 53px;
  font-size: 58px;
  line-height: 0.75;
  letter-spacing: -0.12em;
}
.poster i {
  position: absolute;
  bottom: 18px;
  color: #b8b5ab;
  font: 10px var(--mono);
}
.case-label {
  position: absolute;
  right: 24px;
  bottom: 21px;
  font: 12px var(--mono);
  letter-spacing: 0.08em;
}
.case-label b {
  display: block;
  margin-top: 9px;
  color: var(--purple);
}
.flipped {
  grid-template-columns: 1.1fr 0.9fr;
}
.flipped .case-info {
  order: 2;
  padding: 41px 0 35px 45px;
}
.aavara-art {
  display: grid;
  place-items: center;
  background: #192431;
}
.browser {
  width: 80%;
  height: 280px;
  background: #f5f1e8;
  box-shadow: 20px 20px 0 #2c4354;
  transition: 0.5s;
}
.case-study:hover .browser {
  translate: -5px -5px;
}
.browser header {
  height: 25px;
  padding: 8px;
  background: #d7d5ce;
}
.browser header i {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 3px;
  border-radius: 50%;
  background: #252525;
}
.browser header span {
  float: right;
  color: #666;
  font: 8px var(--mono);
}
.browser main {
  position: relative;
  height: 255px;
  padding: 25px;
}
.browser main b {
  font-size: 42px;
  letter-spacing: -0.12em;
  line-height: 0.8;
}
.browser main div {
  position: absolute;
  right: 24px;
  bottom: 0;
  width: 42%;
  height: 70%;
  background: #aa8e70;
}
.process {
  background: var(--lav);
}
.process-heading {
  align-items: end;
}
.process-heading .copy {
  margin: 0;
  font-size: 17px;
}
.process-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-top: 70px;
  border-top: 1px solid #d6d0f0;
}
.process-tabs button {
  padding: 16px 0;
  border: 0;
  border-right: 1px solid #d6d0f0;
  background: none;
  color: var(--body);
  font: 12px var(--mono);
  text-align: left;
  cursor: pointer;
}
.process-tabs button:first-child {
  border-left: 1px solid #d6d0f0;
}
.process-tabs button span {
  display: block;
  margin-top: 7px;
  color: var(--text);
  font: 14px var(--sans);
}
.process-tabs button.active {
  padding-left: 14px;
  color: var(--purple);
}
.process-display {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 305px;
  border: 1px solid #dcd8ed;
  background: #fff;
}
.process-copy {
  padding: 38px;
}
.process-copy h3 {
  margin: 28px 0 20px;
  font-size: 37px;
  line-height: 0.98;
}
.process-copy > p:last-child {
  max-width: 390px;
  color: var(--body);
  font-size: 16px;
  line-height: 1.7;
}
.process-art {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #1c2034;
  color: #fff;
}
.process-art:before,
.process-art:after {
  position: absolute;
  width: 340px;
  height: 340px;
  border: 1px solid #ffffff25;
  border-radius: 50%;
  content: "";
}
.process-art:after {
  width: 205px;
  height: 205px;
}
.process-art i {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c7ff5d;
}
.process-art i:nth-child(1) {
  left: 21%;
  top: 25%;
}
.process-art i:nth-child(2) {
  right: 25%;
  top: 39%;
  background: var(--violet);
}
.process-art i:nth-child(3) {
  left: 38%;
  bottom: 20%;
  background: #fff;
}
.process-art b {
  z-index: 1;
  font-size: 27px;
  line-height: 0.9;
  letter-spacing: -0.08em;
  text-align: center;
}
.different .copy p {
  color: #d0d1d7;
}
.difference-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 75px;
  border-top: 1px solid var(--darkline);
}
.difference-grid article {
  position: relative;
  min-height: 235px;
  padding: 20px;
  border-left: 1px solid var(--darkline);
}
.difference-grid article:last-child {
  border-right: 1px solid var(--darkline);
}
.difference-grid i {
  position: absolute;
  right: 20px;
  top: 18px;
  color: #c7ff5d;
  font-size: 23px;
  font-style: normal;
}
.difference-grid h3 {
  margin-top: 109px;
}
.difference-grid p {
  color: #c1c3cb;
}
.industry-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--line);
}
.industry-list article {
  min-height: 310px;
  padding: 18px;
  border-right: 1px solid var(--line);
  transition: 0.25s;
}
.industry-list article:first-child {
  border-left: 1px solid var(--line);
}
.industry-list article:hover {
  background: #f0edff;
}
.industry-list b {
  color: var(--purple);
  font: 12px var(--mono);
}
.industry-list h3 {
  margin: 35px 0 18px;
  font-size: 18px;
}
.industry-list p {
  color: var(--body);
  font-size: 14px;
  line-height: 1.65;
}
.industry-art {
  display: grid;
  place-items: center;
  height: 75px;
  background: var(--ink);
  color: #fff;
  font: 11px var(--mono);
  letter-spacing: 0.08em;
  transition: 0.3s;
}
.industry-list article:hover .industry-art {
  scale: 0.96;
  background: var(--purple);
}
.commerce {
  background: #d5ff66;
  color: var(--ink);
  font-size: 20px;
}
.fashion {
  background: #d8d5d0;
  color: #222;
  text-align: center;
}
.startup {
  background: #f4b79b;
  color: #211b30;
  font-size: 35px;
}
.local {
  background: #b9c1eb;
}
.reviews {
  background: #f4f3f0;
}
.quotes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
}
.quote {
  padding: 42px;
  background: #f4f3f0;
}
.quote > span {
  color: #bcaaff;
  font: 86px Georgia;
  line-height: 0.4;
}
.stars {
  margin: 29px 0;
  color: var(--purple);
  font: 13px var(--mono);
  letter-spacing: 3px;
}
.quote blockquote {
  margin: 0 0 53px;
  font-size: 22px;
  line-height: 1.5;
  letter-spacing: -0.035em;
}
.quote footer {
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.quote footer strong {
  font-size: 14px;
}
.quote footer p {
  margin: 5px 0;
  color: var(--body);
  font-size: 14px;
}
.micro-trust {
  padding: 48px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.micro-trust > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}
.micro-trust > div > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  gap: 18px;
}
.micro-trust span {
  color: var(--body);
  font: 12px var(--mono);
}
.micro-trust span:before {
  margin-right: 8px;
  color: var(--purple);
  content: "✦";
}
.contact {
  position: relative;
  overflow: hidden;
  background: #15192b;
  color: #fff;
}
.contact-grid {
  opacity: 0.7;
  background-image:
    linear-gradient(#ffffff0c 1px, transparent 1px),
    linear-gradient(90deg, #ffffff0c 1px, transparent 1px);
  background-size: 45px 45px;
  mask-image: radial-gradient(ellipse, black, transparent 70%);
}
.contact-grid:after {
  position: absolute;
  left: 50%;
  top: -300px;
  width: 600px;
  height: 600px;
  translate: -50%;
  border-radius: 50%;
  background: #693cff;
  filter: blur(150px);
  opacity: 0.45;
  content: "";
  animation: glow 8s ease-in-out infinite;
}
.contact-content {
  position: relative;
  padding: 124px 20px;
  text-align: center;
}
.contact h2 {
  margin: 23px 0;
  font-size: clamp(53px, 7vw, 100px);
  line-height: 0.85;
}
.contact-content > p:not(.eyebrow) {
  max-width: 620px;
  margin: 0 auto 30px;
  color: #d0d1d7;
  font-size: 18px;
  line-height: 1.7;
}
.contact small {
  display: block;
  margin-top: 16px;
  color: #bfc1ca;
  font: 11px var(--mono);
}
.footer {
  padding: 67px 0 20px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
}
.footer-grid > div:first-child {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  max-width: 340px;
}
.footer p {
  margin: 10px 0;
  color: var(--body);
  font-size: 14px;
  line-height: 1.7;
}
.footer-grid h3 {
  margin: 0 0 17px;
  font-size: 13px;
}
.footer-grid > div:not(:first-child) {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-grid span {
  color: var(--body);
  font-size: 12px;
}
.copyright {
  display: flex;
  justify-content: space-between;
  margin-top: 52px;
  padding-top: 19px;
  border-top: 1px solid var(--line);
  color: var(--body);
  font: 12px var(--mono);
}
.copyright a {
  font-size: 12px;
}
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: 0.7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: none;
}
.intro-up {
  opacity: 0;
  transform: translateY(18px);
  animation: intro 0.8s forwards;
}
.intro-up:nth-child(2) {
  animation-delay: 0.1s;
}
.intro-up:nth-child(3) {
  animation-delay: 0.24s;
}
.intro-up:nth-child(4) {
  animation-delay: 0.38s;
}
@keyframes intro {
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes drift {
  50% {
    translate: 0 -10px;
  }
}
@keyframes spin {
  to {
    rotate: 360deg;
  }
}
@keyframes bar {
  to {
    scale: 0.7 1;
  }
}
@keyframes glow {
  50% {
    scale: 1.15;
    opacity: 0.3;
  }
}
@media (max-width: 800px) {
  .wrap {
    width: calc(100% - 40px);
  }
  .header {
    height: 69px;
  }
  .navlinks,
  .nav-cta {
    display: none;
  }
  .hamburger {
    display: block;
    margin-left: auto;
    padding: 8px;
    border: 0;
    background: none;
  }
  .hamburger i {
    display: block;
    width: 24px;
    height: 2px;
    margin: 5px;
    background: var(--text);
    transition: 0.25s;
  }
  .hamburger.open i:first-child {
    transform: translateY(3.5px) rotate(45deg);
  }
  .hamburger.open i:last-child {
    transform: translateY(-3.5px) rotate(-45deg);
  }
  .mobile-menu {
    position: absolute;
    width: 100%;
    height: calc(100vh - 69px);
    padding: 48px 20px;
    background: var(--ink);
    flex-direction: column;
    gap: 23px;
    opacity: 0;
    transform: translateY(-110%);
    transition: 0.35s;
  }
  .mobile-menu.open {
    display: flex;
    opacity: 1;
    transform: none;
  }
  .mobile-menu a {
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.07em;
    text-decoration: none;
  }
  .hero {
    grid-template-columns: 1fr;
    padding: 65px 0 35px;
  }
  .hero-world {
    height: 390px;
    margin-top: -15px;
  }
  .performance {
    left: 4px;
    top: 44px;
    scale: 0.78;
  }
  .creative {
    right: 1px;
    top: 71px;
    scale: 0.8;
  }
  .roas {
    right: 29px;
    bottom: 12px;
    scale: 0.8;
  }
  .orbit-text {
    left: 45px;
    top: 24px;
    scale: 0.8;
  }
  .trust {
    padding-bottom: 80px;
  }
  .trust-head,
  .section-title {
    display: block;
  }
  .trust-head p {
    margin-top: 23px;
  }
  .stats {
    grid-template-columns: 1fr 1fr;
    gap: 24px 0;
  }
  .two-col {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .principles,
  .difference-grid {
    grid-template-columns: 1fr 1fr;
  }
  .principles article:nth-child(3),
  .difference-grid article:nth-child(3) {
    border-left: 1px solid var(--line);
  }
  .principles article:nth-child(2),
  .difference-grid article:nth-child(2) {
    border-right: 1px solid var(--line);
  }
  .principles article,
  .difference-grid article {
    border-bottom: 1px solid var(--line);
  }
  .difference-grid article:nth-child(3) {
    border-color: var(--darkline);
  }
  .service {
    grid-template-columns: 38px 1fr 20px;
    gap: 10px;
    padding: 23px 0;
  }
  .service p,
  .service-preview {
    display: none;
  }
  .service h3 {
    font-size: 19px;
  }
  .case-study,
  .flipped {
    grid-template-columns: 1fr;
  }
  .case-info,
  .flipped .case-info {
    order: 0;
    padding: 32px 0;
  }
  .case-art {
    min-height: 330px;
  }
  .process-tabs {
    grid-template-columns: repeat(5, 145px);
    overflow-x: auto;
  }
  .process-display {
    grid-template-columns: 1fr;
  }
  .process-art {
    min-height: 230px;
  }
  .industry-list {
    display: flex;
    overflow-x: auto;
  }
  .industry-list article {
    min-width: 200px;
  }
  .quotes {
    grid-template-columns: 1fr;
  }
  .micro-trust > div {
    display: block;
  }
  .micro-trust > div > div {
    justify-content: start;
    margin-top: 20px;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 38px;
  }
  .footer-grid > div:first-child {
    grid-column: span 2;
  }
  .section {
    padding: 85px 0;
  }
}
@media (max-width: 430px) {
  .wrap {
    width: calc(100% - 32px);
  }
  .hero h1 {
    font-size: 51px;
  }
  .lede,
  .copy p,
  .case-info > p:not(.eyebrow),
  .process-copy > p:last-child,
  .contact-content > p:not(.eyebrow) {
    font-size: 16px;
  }
  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  .hero-world {
    height: 340px;
  }
  .performance {
    left: -30px;
    top: 25px;
    scale: 0.65;
  }
  .creative {
    right: -31px;
    top: 45px;
    scale: 0.63;
  }
  .roas {
    right: -9px;
    bottom: 0;
    scale: 0.65;
  }
  .orbit-text {
    left: -5px;
    top: 9px;
    scale: 0.72;
  }
  .trust h2,
  .two-col h2,
  .section-title h2 {
    font-size: 43px;
  }
  .stats strong {
    font-size: 38px;
  }
  .section {
    padding: 72px 0;
  }
  .principles,
  .difference-grid {
    grid-template-columns: 1fr;
  }
  .principles article,
  .difference-grid article,
  .principles article:nth-child(3),
  .difference-grid article:nth-child(3) {
    border-left: 1px solid var(--line);
  }
  .difference-grid article,
  .difference-grid article:nth-child(3) {
    border-color: var(--darkline);
  }
  .principles h3,
  .difference-grid h3 {
    margin-top: 30px;
  }
  .principles article,
  .difference-grid article {
    min-height: 135px;
  }
  .difference-grid h3 {
    margin-top: 44px;
  }
  .case-info h3 {
    font-size: 26px;
  }
  .poster {
    scale: 0.77;
  }
  .browser {
    width: 88%;
    scale: 0.85;
  }
  .process-copy {
    padding: 28px;
  }
  .process-copy h3 {
    font-size: 31px;
  }
  .quote {
    padding: 28px;
  }
  .quote blockquote {
    font-size: 18px;
  }
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .footer-grid > div:first-child {
    grid-column: auto;
  }
  .copyright {
    flex-wrap: wrap;
    gap: 15px;
  }
}

/* Final copper editorial accent pass — backgrounds intentionally remain unchanged. */
:root {
  --copper: #c96a3d;
}
.logo,
.logo span,
.eyebrow,
.hero h1 em,
h2 span,
.artifact small,
.performance strong i,
.roas i,
.orbit-text,
.stats strong,
.quiet-link b,
.arrow-link b,
.principles b,
.difference-grid b,
.service > a,
.case-label b,
.process-tabs button.active,
.industry-list b,
.stars,
.micro-trust span::before,
.nav-cta b {
  color: var(--copper);
}
.eyebrow i {
  background: var(--copper);
  box-shadow: 0 0 0 4px #f5e6df;
}
.quote > span {
  color: #d89a7c;
}
.creative em,
.poster small,
.difference-grid i {
  color: var(--copper);
}
.hero h1,
.trust h2,
.two-col h2,
.section-title h2,
.case-info h3,
.process-copy h3,
.quote blockquote {
  color: #111318;
}
.services .section-title h2,
.different .two-col h2 {
  color: #fff;
}
.lede,
.trust-head p,
.copy p,
.case-info > p:not(.eyebrow),
.process-heading .copy,
.process-copy > p:last-child,
.industry-list p,
.quote footer p,
.footer p {
  color: #5f6068;
}
.service p,
.different .copy p,
.difference-grid p {
  color: #d1d0d5;
}
.principles p,
.difference-grid p,
.industry-list p {
  font-size: 15px;
}
.service p {
  font-size: 15px;
}
.case-info > p:not(.eyebrow),
.process-copy > p:last-child {
  font-size: 17px;
}
.trust-head p,
.section-title > p:last-child {
  font-size: 17px;
}
.case-study:hover {
  border-color: #d89a7c;
}
.case-study:hover .case-label b {
  color: var(--copper);
}
.main-button:hover {
  box-shadow: 0 14px 25px #c96a3d30;
}
@media (max-width: 800px) {
  .service p {
    font-size: 15px;
  }
  .case-info > p:not(.eyebrow),
  .process-copy > p:last-child {
    font-size: 16px;
  }
}

/* Warm accent system: existing section backgrounds remain intact. */
:root {
  --purple: #c96a3d;
  --violet: #ad7c42;
}
.hero-grid,
.contact-grid {
  background-image:
    linear-gradient(#c96a3d12 1px, transparent 1px),
    linear-gradient(90deg, #c96a3d12 1px, transparent 1px);
}
.orbit-text {
  border-color: #c96a3d35;
  color: var(--copper);
}
.brand-preview i {
  background: var(--copper);
}
.brand-preview i:nth-child(3) {
  background: #b98252;
}
.design-preview {
  background: #b76437;
}
.ux-preview i:nth-child(2) {
  background: var(--copper);
}
.web-preview {
  background: #f3e7df;
}
.web-preview i {
  background: #c98a63;
}
.ux-preview i {
  background: #f0e2da;
}
.local {
  background: #d9c5b5;
}
.contact-grid::after {
  background: #c96a3d;
}
.case-study:hover {
  border-color: #d8a17f;
}

.modal-open {
  overflow: hidden;
}
.service-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 28px;
  visibility: hidden;
  opacity: 0;
  transition:
    opacity 0.28s ease,
    visibility 0.28s ease;
}
.service-modal.open {
  visibility: visible;
  opacity: 1;
}
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgb(17 19 24 / 0.72);
  backdrop-filter: blur(8px);
}
.modal-panel {
  position: relative;
  width: min(940px, 100%);
  max-height: min(780px, calc(100vh - 56px));
  overflow: auto;
  padding: 58px;
  background: #fafafc;
  color: #111318;
  box-shadow: 0 28px 90px rgb(0 0 0 / 0.35);
  border-radius: 18px;
  transform: translateY(18px) scale(0.985);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.service-modal.open .modal-panel {
  transform: none;
}
.modal-close {
  position: absolute;
  top: 21px;
  right: 23px;
  width: 36px;
  height: 36px;
  border: 1px solid #ddd8d2;
  border-radius: 50%;
  background: transparent;
  color: #111318;
  font-size: 27px;
  line-height: 1;
  cursor: pointer;
  transition: 0.2s;
}
.modal-close:hover {
  background: var(--copper);
  border-color: var(--copper);
  color: #fff;
}
.modal-kicker {
  color: var(--copper);
  font: 12px var(--mono);
  letter-spacing: 0.13em;
}
.modal-panel h2 {
  max-width: 700px;
  margin: 20px 0;
  font-size: clamp(40px, 5vw, 67px);
  line-height: 0.94;
  letter-spacing: -0.075em;
}
.modal-intro {
  max-width: 710px;
  margin: 0;
  color: #42434a;
  font-size: 20px;
  line-height: 1.55;
}
.modal-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 62px;
  margin-top: 52px;
  padding-top: 32px;
  border-top: 1px solid #dedbd5;
}
.modal-copy {
  margin: 0 0 31px;
  color: #5f6068;
  font-size: 16px;
  line-height: 1.75;
}
.modal-grid h3 {
  margin: 0 0 18px;
  font-size: 18px;
  letter-spacing: -0.04em;
}
.modal-list {
  display: grid;
  gap: 12px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.modal-list li {
  padding: 12px 0;
  border-bottom: 1px solid #e3dfd9;
  color: #34353a;
  font-size: 15px;
}
.modal-list li::before {
  margin-right: 10px;
  color: var(--copper);
  content: "↗";
}
.modal-grid aside > span {
  color: #77736d;
  font: 11px var(--mono);
  letter-spacing: 0.11em;
}
.modal-tools {
  margin: 13px 0 25px;
  color: #303137;
  font-size: 15px;
  line-height: 1.6;
}
.modal-art {
  position: relative;
  display: grid;
  place-items: center;
  height: 190px;
  overflow: hidden;
  background: #1a1b20;
  color: #fff;
}
.modal-art::before,
.modal-art::after {
  position: absolute;
  width: 210px;
  height: 210px;
  border: 1px solid #c96a3d6b;
  border-radius: 50%;
  content: "";
}
.modal-art::after {
  width: 115px;
  height: 115px;
  border-color: #f3d4c4;
}
.modal-art i {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--copper);
}
.modal-art i:nth-child(1) {
  left: 19%;
  top: 26%;
}
.modal-art i:nth-child(2) {
  right: 23%;
  bottom: 27%;
  background: #f3d4c4;
}
.modal-art i:nth-child(3) {
  left: 42%;
  bottom: 16%;
}
.modal-art b {
  z-index: 1;
  font-size: 23px;
  line-height: 0.9;
  letter-spacing: -0.08em;
  text-align: center;
}
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  margin-top: 47px;
  padding-top: 24px;
  border-top: 1px solid #dedbd5;
}
.modal-footer p {
  margin: 0;
  color: #66676d;
  font: 12px var(--mono);
}
.modal-cta {
  display: inline-flex;
  gap: 25px;
  padding: 15px 18px;
  background: var(--copper);
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  transition: 0.2s;
}
.modal-cta:hover {
  transform: translateY(-2px);
  background: #ae5631;
  box-shadow: 0 10px 18px #c96a3d38;
}
.modal-cta b {
  font-size: 18px;
  font-weight: 400;
}
@media (max-width: 700px) {
  .service-modal {
    padding: 10px;
  }
  .modal-panel {
    max-height: calc(100vh - 20px);
    padding: 50px 25px 28px;
    border-radius: 13px;
  }
  .modal-panel h2 {
    font-size: 40px;
  }
  .modal-intro {
    font-size: 17px;
  }
  .modal-grid {
    grid-template-columns: 1fr;
    gap: 30px;
    margin-top: 34px;
  }
  .modal-footer {
    align-items: flex-start;
    flex-direction: column;
    margin-top: 34px;
  }
  .modal-cta {
    width: 100%;
    justify-content: space-between;
  }
  .modal-art {
    height: 150px;
  }
}

/* DEVX4 PREMIUM SERVICE EXPERIENCE
   Warm copper accent system — no blue/purple service accents. */
.services {
  background: var(--ink);
  color: #fff;
}
.services-intro {
  display: grid;
  grid-template-columns: 1fr 0.72fr;
  gap: 70px;
  align-items: end;
  margin-bottom: 65px;
}
.services-intro h2 {
  margin: 15px 0 0;
  font-size: clamp(45px, 5vw, 72px);
  line-height: 0.94;
  color: #fff;
}
.services-intro h2 span {
  color: var(--copper);
}
.services-intro > p {
  margin: 0;
  max-width: 430px;
  color: #c8c9cf;
  font-size: 17px;
  line-height: 1.75;
}
.service-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.service-card {
  min-width: 0;
  padding: 10px 10px 15px;
  background: #f7f6f3;
  color: #17181c;
  border: 1px solid #e4e1dc;
  border-radius: 18px;
  box-shadow: 0 18px 45px rgb(0 0 0 / 0.16);
  transform: translateY(0);
  transition:
    transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}
.service-card:hover {
  transform: translateY(-9px);
  border-color: #d9b09a;
  box-shadow: 0 28px 55px rgb(0 0 0 / 0.24);
}
.service-card-media {
  position: relative;
  height: 225px;
  overflow: hidden;
  border-radius: 12px;
  background: #202125;
}
.service-card-media::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(135deg, transparent 45%, rgb(201 106 61 / 0.08));
}
.media-kicker {
  position: absolute;
  z-index: 2;
  top: 18px;
  left: 18px;
  color: var(--copper);
  font: 10px var(--mono);
  letter-spacing: 0.12em;
}
.service-media-ads {
  padding: 22px;
}
.service-media-ads > strong {
  position: absolute;
  left: 19px;
  top: 74px;
  font-size: 72px;
  line-height: 1;
  letter-spacing: -0.09em;
  color: #fff;
}
.service-media-ads > small {
  position: absolute;
  left: 22px;
  bottom: 20px;
  color: #aeb0b7;
  font: 9px var(--mono);
}
.media-chart {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 125px;
  height: 105px;
  display: flex;
  align-items: end;
  gap: 7px;
}
.media-chart i {
  flex: 1;
  background: var(--copper);
  border-radius: 2px 2px 0 0;
  animation: serviceBar 2.2s ease-in-out infinite alternate;
}
.media-chart i:nth-child(1) {
  height: 28%;
}
.media-chart i:nth-child(2) {
  height: 42%;
}
.media-chart i:nth-child(3) {
  height: 35%;
}
.media-chart i:nth-child(4) {
  height: 62%;
}
.media-chart i:nth-child(5) {
  height: 78%;
}
.media-chart i:nth-child(6) {
  height: 100%;
}
@keyframes serviceBar {
  to {
    transform: scaleY(0.82);
    opacity: 0.72;
  }
}

.service-media-web {
  background: #24272a;
  padding: 30px;
}
.browser-art {
  position: absolute;
  inset: 46px 22px 18px;
  background: #f4f1eb;
  box-shadow: 14px 14px 0 #9d725b;
  transform: rotate(-2deg);
  transition: 0.4s ease;
}
.service-card:hover .browser-art {
  transform: rotate(0) translate(-4px, -4px);
}
.browser-top {
  height: 22px;
  padding: 6px 8px;
  background: #dedbd4;
  color: #5e5b56;
  font: 7px var(--mono);
}
.browser-top i {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #444;
  margin-right: 3px;
}
.browser-top b {
  float: right;
  font-weight: 400;
}
.browser-body {
  position: relative;
  height: calc(100% - 22px);
  padding: 22px;
  overflow: hidden;
}
.browser-body strong {
  font-size: 29px;
  line-height: 0.82;
  letter-spacing: -0.08em;
}
.browser-body i {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 43%;
  height: 76%;
  background: #bd9b82;
}

.service-media-brand {
  padding: 22px;
  background: #ded9d2;
  color: #18191b;
}
.service-media-brand > strong {
  position: absolute;
  left: 20px;
  top: 70px;
  font-size: 55px;
  letter-spacing: -0.12em;
}
.service-media-brand > small {
  position: absolute;
  left: 22px;
  bottom: 20px;
  font: 9px var(--mono);
  color: #5e5b56;
}
.brand-dots {
  position: absolute;
  right: 20px;
  bottom: 20px;
  display: flex;
  gap: 8px;
}
.brand-dots i {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--copper);
}
.brand-dots i:nth-child(2) {
  background: #b98252;
}
.brand-dots i:nth-child(3) {
  background: #1a1b1e;
}

.service-media-design {
  padding: 22px;
  background: #1c1d20;
  color: #fff;
}
.service-media-design > strong {
  position: absolute;
  left: 20px;
  top: 58px;
  font-size: 39px;
  line-height: 0.82;
  letter-spacing: -0.09em;
}
.service-media-design > strong em {
  color: var(--copper);
  font-style: normal;
}
.service-media-design > small {
  position: absolute;
  right: 20px;
  bottom: 20px;
  color: #aeb0b7;
  font: 9px var(--mono);
}

.service-media-ux {
  background: #ebe7e1;
  padding: 20px;
}
.ux-art {
  position: absolute;
  inset: 43px 22px 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.ux-art i {
  background: #d8d0c7;
  border-radius: 5px;
}
.ux-art i:nth-child(2) {
  background: var(--copper);
}
.ux-art i:nth-child(3) {
  background: #b98252;
}
.ux-art i:nth-child(4) {
  background: #242528;
}
.ux-art b {
  position: absolute;
  left: 18px;
  top: 24px;
  color: #fff;
  font-size: 19px;
  line-height: 0.8;
  letter-spacing: -0.07em;
}

.service-media-app {
  background: #242629;
  padding: 20px;
}
.app-art {
  position: absolute;
  inset: 45px 25px 20px;
  border: 1px solid #4a4b4e;
  background: #1d1e21;
}
.app-art span {
  position: absolute;
  left: 15px;
  top: 15px;
  padding: 7px 9px;
  background: var(--copper);
  color: #fff;
  font: 9px var(--mono);
}
.app-art b {
  position: absolute;
  right: 16px;
  bottom: 16px;
  color: #fff;
  font-size: 23px;
  line-height: 0.8;
  text-align: right;
  letter-spacing: -0.08em;
}
.app-art i {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--copper);
}
.app-art i:nth-child(2) {
  right: 18%;
  top: 24%;
}
.app-art i:nth-child(3) {
  right: 31%;
  top: 45%;
  background: #d6b79f;
}
.app-art i:nth-child(4) {
  left: 35%;
  bottom: 25%;
  background: #fff;
}

.service-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 13px 5px 11px;
}
.service-card-tags span {
  padding: 6px 8px;
  border: 1px solid #dedbd5;
  border-radius: 999px;
  color: #55565c;
  font: 9px var(--mono);
}
.service-card-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 7px 5px 2px;
}
.service-card-bottom > div {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}
.service-card-bottom > div > b {
  color: #8a8985;
  font: 10px var(--mono);
  padding-top: 2px;
}
.service-card-bottom > div > span {
  font-size: 14px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
}
.service-card-bottom a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 13px;
  border-radius: 8px;
  background: #17181c;
  color: #fff;
  text-decoration: none;
  font-size: 10px;
  font-weight: 800;
  transition: 0.25s;
}
.service-card-bottom a b {
  color: var(--copper);
  font-size: 14px;
  font-weight: 400;
}
.service-card-bottom a:hover {
  background: var(--copper);
  transform: translateY(-2px);
}
.service-card-bottom a:hover b {
  color: #fff;
}

/* Rich reference-style modal */
.modal-panel {
  width: min(1060px, 100%);
  max-height: min(850px, calc(100vh - 48px));
  padding: 60px;
  border-radius: 20px;
}
.modal-panel h2 {
  max-width: 850px;
  font-size: clamp(43px, 5vw, 72px);
}
.modal-intro {
  max-width: 850px;
  font-size: 19px;
}
.modal-grid {
  grid-template-columns: 1.15fr 0.85fr;
}
.modal-arsenal {
  margin-top: 48px;
  padding-top: 30px;
  border-top: 1px solid #dedbd5;
}
.modal-section-label {
  color: #77736d;
  font: 11px var(--mono);
  letter-spacing: 0.12em;
  margin-bottom: 16px;
}
.modal-arsenal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.modal-arsenal-card {
  position: relative;
  min-height: 105px;
  padding: 18px;
  background: #f0eee9;
  border: 1px solid #dfdcd6;
  transition: 0.25s;
}
.modal-arsenal-card:hover {
  transform: translateY(-4px);
  border-color: #d6aa92;
  box-shadow: 0 12px 25px rgb(0 0 0 / 0.08);
}
.modal-arsenal-card span {
  color: var(--copper);
  font: 10px var(--mono);
}
.modal-arsenal-card b {
  display: block;
  margin-top: 25px;
  font-size: 17px;
  letter-spacing: -0.04em;
}
.modal-arsenal-card i {
  position: absolute;
  right: 16px;
  top: 16px;
  color: var(--copper);
  font-style: normal;
}
.modal-outcome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-top: 18px;
  padding: 24px 0;
  border-top: 1px solid #dedbd5;
  border-bottom: 1px solid #dedbd5;
}
.modal-outcome span {
  color: #77736d;
  font: 10px var(--mono);
  letter-spacing: 0.11em;
}
.modal-outcome strong {
  max-width: 650px;
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: -0.025em;
}
.modal-footer {
  margin-top: 28px;
}
.modal-cta {
  background: var(--copper);
}
.modal-cta:hover {
  background: #ae5631;
}

/* Remove legacy blue/purple accents that can leak into the agency theme. */
:root {
  --purple: var(--copper);
  --violet: #b98252;
}
.logo,
.logo span,
.eyebrow,
.hero h1 em,
h2 span,
.artifact small,
.performance strong i,
.roas i,
.orbit-text,
.stats strong,
.quiet-link b,
.arrow-link b,
.principles b,
.difference-grid b,
.case-label b,
.process-tabs button.active,
.industry-list b,
.stars,
.micro-trust span::before,
.nav-cta b {
  color: var(--copper);
}
.eyebrow i {
  background: var(--copper);
  box-shadow: 0 0 0 4px #f3e2d8;
}
.nav-cta b {
  color: var(--copper);
}
.hero-grid,
.contact-grid {
  background-image:
    linear-gradient(#c96a3d12 1px, transparent 1px),
    linear-gradient(90deg, #c96a3d12 1px, transparent 1px);
}
.performance .chart i,
.chart i {
  background: var(--copper);
}
.chart i:nth-child(7) {
  background: #b98252;
}
.dot {
  background: var(--copper);
}
.dot-b {
  background: #d9b08c;
}
@media (max-width: 900px) {
  .services-intro {
    grid-template-columns: 1fr;
    gap: 22px;
    margin-bottom: 42px;
  }
  .service-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .service-card-media {
    height: 205px;
  }
  .modal-panel {
    padding: 48px;
  }
}
@media (max-width: 620px) {
  .service-cards {
    grid-template-columns: 1fr;
  }
  .service-card-media {
    height: 220px;
  }
  .services-intro h2 {
    font-size: 45px;
  }
  .modal-panel {
    max-height: calc(100vh - 20px);
    padding: 48px 23px 28px;
    border-radius: 14px;
  }
  .modal-panel h2 {
    font-size: 40px;
  }
  .modal-intro {
    font-size: 17px;
  }
  .modal-grid {
    grid-template-columns: 1fr;
    gap: 30px;
    margin-top: 34px;
  }
  .modal-arsenal-grid {
    grid-template-columns: 1fr;
  }
  .modal-outcome {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
  .modal-footer {
    align-items: flex-start;
    flex-direction: column;
  }
  .modal-cta {
    width: 100%;
    justify-content: space-between;
  }
}

/* Social Media Management service card */
.service-media-social {
  padding: 22px;
  background: #202124;
  color: #fff;
}
.service-media-social > strong {
  position: absolute;
  left: 20px;
  top: 62px;
  font-size: 42px;
  line-height: 0.82;
  letter-spacing: -0.09em;
}
.service-media-social > small {
  position: absolute;
  left: 22px;
  bottom: 18px;
  color: #aeb0b7;
  font: 8px var(--mono);
  letter-spacing: 0.05em;
}
.social-feed {
  position: absolute;
  right: 18px;
  top: 54px;
  width: 105px;
  height: 118px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 7px;
  border: 1px solid #4a4b4e;
  background: #2b2c30;
  transform: rotate(3deg);
  transition: 0.4s ease;
}
.service-card:hover .social-feed {
  transform: rotate(0) translate(-4px, -4px);
}
.social-feed i {
  border-radius: 3px;
  background: #d9b08c;
}
.social-feed i:nth-child(2) {
  background: var(--copper);
}
.social-feed i:nth-child(3) {
  background: #eee9e2;
}
.social-feed b {
  position: absolute;
  right: 7px;
  bottom: 6px;
  color: #fff;
  font: 7px var(--mono);
}

/* Results — clean horizontal reference-style performance slider */
.results {
  background: #fff;
  overflow: hidden;
}
.results-head {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  align-items: end;
  gap: 60px;
  margin-bottom: 48px;
}
.results-head h2 {
  margin: 15px 0 0;
  font-size: clamp(44px, 5vw, 76px);
  line-height: 0.94;
  letter-spacing: -0.055em;
}
.results-head h2 span {
  color: var(--copper);
}
.results-head > p {
  margin: 0 0 5px;
  max-width: 430px;
  color: var(--body);
  font-size: 16px;
  line-height: 1.7;
}
.results-stage {
  position: relative;
  min-height: 560px;
  padding: 12px 0 70px;
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.results-stage.dragging {
  cursor: grabbing;
}

.results-track {
  position: relative;
  width: max-content;
  min-width: 100%;
  height: 430px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
  padding: 26px 28px 36px;
  box-sizing: border-box;
  transform: translateX(var(--results-x, 0px));
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
.result-card {
  position: relative;
  flex: 0 0 270px;
  width: 270px;
  padding: 10px 10px 16px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #e6e3de;
  box-shadow: 0 16px 35px rgb(0 0 0 / 0.1);
  transform: scale(var(--result-scale, 0.96));
  opacity: var(--result-opacity, 0.78);
  transition:
    transform 0.3s ease,
    opacity 0.3s ease,
    box-shadow 0.3s ease;
}
.result-card.active {
  --result-scale: 1.04;
  --result-opacity: 1;
  box-shadow: 0 24px 48px rgb(0 0 0 / 0.16);
  z-index: 2;
}
.result-card img {
  display: block;
  width: 100%;
  height: 315px;
  object-fit: cover;
  object-position: top center;
  border-radius: 10px;
}
.result-label {
  padding: 12px 6px 2px;
  color: #17181c;
  font-family: var(--mono);
  font-size: 22px;
  line-height: 1.05;
  letter-spacing: 0.04em;
  font-weight: 800;
  text-align: center;
}
.result-label::after {
  content: "";
  display: block;
  width: 30px;
  height: 3px;
  margin: 9px auto 0;
  background: var(--copper);
  border-radius: 10px;
}
.results-hint {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  color: #77736d;
  font: 12px var(--mono);
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.results-hint span {
  color: var(--copper);
  margin: 0 8px;
}
@media (max-width: 1100px) {
  .result-card {
    flex-basis: 245px;
    width: 245px;
  }
  .result-card img {
    height: 295px;
  }
  .result-label {
    font-size: 20px;
  }
  .results-track {
    gap: 20px;
    padding-left: 24px;
    padding-right: 24px;
  }
}
@media (max-width: 800px) {
  .results-head {
    grid-template-columns: 1fr;
    gap: 22px;
    margin-bottom: 35px;
  }
  .results-stage {
    min-height: 500px;
    padding-bottom: 52px;
  }
  .results-track {
    height: 390px;
    gap: 16px;
    padding: 24px 18px 30px;
  }
  .result-card {
    flex-basis: 220px;
    width: 220px;
  }
  .result-card img {
    height: 265px;
  }
  .result-label {
    font-size: 18px;
  }
  .results-hint {
    bottom: 10px;
  }
  .copyright-links {
    gap: 14px;
    flex-wrap: wrap;
  }
}
@media (max-width: 620px) {
  .results-stage {
    min-height: 455px;
  }
  .results-track {
    height: 350px;
    gap: 14px;
    padding: 18px 14px 26px;
  }
  .result-card {
    flex-basis: 190px;
    width: 190px;
    padding: 7px 7px 12px;
  }
  .result-card img {
    height: 225px;
  }
  .result-label {
    font-size: 19px;
    padding-top: 10px;
    font-weight: 800;
  }
}
.review-person {
  margin-top: 12px;
  color: #17181c;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.stars {
  margin-top: 10px;
}
.copyright-links {
  display: flex;
  gap: 22px;
  align-items: center;
}

/* =========================================================
   DEVX4 INTERACTION LAYER
   Visual/interaction enhancement only — content unchanged.
   ========================================================= */
:root {
  --interaction-accent: var(--copper, #c96a3d);
  --interaction-soft: rgba(201, 106, 61, 0.16);
}

/* Subtle scroll progress — gives the page a polished product feel. */
.scroll-progress {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 0;
  height: 2px;
  pointer-events: none;
  background: var(--interaction-accent);
  box-shadow: 0 0 14px rgba(201, 106, 61, 0.45);
  transition: width 0.08s linear;
}

/* Premium cursor, desktop only. */
@media (pointer: fine) {
  body.interactive-cursor-active,
  body.interactive-cursor-active a,
  body.interactive-cursor-active button {
    cursor: none;
  }

  .cursor-dot,
  .cursor-ring {
    position: fixed;
    z-index: 10000;
    top: 0;
    left: 0;
    pointer-events: none;
    border-radius: 50%;
    opacity: 0;
    transform: translate3d(-50%, -50%, 0);
    transition:
      opacity 0.2s ease,
      width 0.22s ease,
      height 0.22s ease,
      border-color 0.22s ease,
      background 0.22s ease;
  }
  .cursor-dot {
    width: 6px;
    height: 6px;
    background: var(--interaction-accent);
  }
  .cursor-ring {
    width: 30px;
    height: 30px;
    border: 1px solid rgba(201, 106, 61, 0.6);
    mix-blend-mode: multiply;
  }
  body.cursor-visible .cursor-dot,
  body.cursor-visible .cursor-ring {
    opacity: 1;
  }
  body.cursor-hover .cursor-ring {
    width: 58px;
    height: 58px;
    background: rgba(201, 106, 61, 0.08);
    border-color: var(--interaction-accent);
  }
  body.cursor-hover .cursor-dot {
    opacity: 0.45;
  }
}

/* Navigation micro-interaction. */
.navlinks a {
  position: relative;
  transition:
    color 0.25s ease,
    transform 0.25s ease;
}
.navlinks a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -7px;
  height: 1px;
  background: var(--interaction-accent);
  transition: right 0.3s ease;
}
.navlinks a:hover {
  color: var(--interaction-accent);
  transform: translateY(-1px);
}
.navlinks a:hover::after {
  right: 0;
}

/* Hero: make the existing artwork feel like a live creative system. */
.hero-world::after {
  content: "";
  position: absolute;
  inset: 5% 5% 8%;
  pointer-events: none;
  border: 1px solid rgba(201, 106, 61, 0.08);
  border-radius: 50%;
  transform: rotate(-9deg) scale(0.92);
  animation: agencyOrbit 14s linear infinite;
}
.hero-world::before {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  right: 18%;
  top: 24%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(201, 106, 61, 0.13),
    transparent 68%
  );
  filter: blur(2px);
  pointer-events: none;
  animation: ambientPulse 5s ease-in-out infinite;
}
.hero-world .artifact {
  will-change: transform;
  transition:
    box-shadow 0.35s ease,
    filter 0.35s ease;
}
.hero-world .artifact:hover {
  filter: saturate(1.04);
  box-shadow: 0 30px 75px rgba(17, 20, 38, 0.18);
}

/* Magnetic CTA feel without changing the CTA itself. */
.magnetic {
  will-change: transform;
  transition:
    transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.25s ease;
}

/* Service cards: depth + pointer spotlight. */
.service-card {
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
  transition:
    transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.5s ease,
    border-color 0.35s ease;
}
.service-card::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    240px circle at var(--spot-x, 50%) var(--spot-y, 50%),
    rgba(255, 255, 255, 0.15),
    transparent 62%
  );
  transition: opacity 0.25s ease;
  border-radius: inherit;
}
.service-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 8%;
  right: 8%;
  bottom: -18px;
  height: 32px;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.18), transparent 70%);
  filter: blur(9px);
  opacity: 0.55;
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}
.service-card.is-hovered::before {
  opacity: 1;
}
.service-card.is-hovered::after {
  opacity: 0.8;
  transform: scale(1.05);
}
.service-card > * {
  transform: translateZ(10px);
}
.service-card-media {
  overflow: hidden;
}
.service-card-media::before {
  content: "";
  position: absolute;
  inset: -40% -20%;
  background: linear-gradient(
    110deg,
    transparent 38%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 62%
  );
  transform: translateX(-70%) rotate(4deg);
  transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}
.service-card.is-hovered .service-card-media::before {
  transform: translateX(70%) rotate(4deg);
}

/* Existing service modal gets a more intentional entrance. */
.service-modal.open .modal-panel {
  animation: modalRise 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.service-modal.open .modal-backdrop {
  animation: modalFade 0.35s ease both;
}

/* Case studies react like physical objects. */
.case-study {
  transform-style: preserve-3d;
}
.case-art > * {
  will-change: transform;
}

/* Process artwork becomes a living system. */
.process-art::before {
  animation: processSpin 18s linear infinite;
}
.process-art::after {
  animation: processSpinReverse 11s linear infinite;
}
.process-art i {
  animation: processDot 3.8s ease-in-out infinite;
}
.process-art i:nth-child(2) {
  animation-delay: -1.2s;
}
.process-art i:nth-child(3) {
  animation-delay: -2.2s;
}

/* Results cards get a gentle depth cue; dragging remains unchanged. */
.result-card {
  transform: translateZ(0);
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    opacity 0.35s ease;
}
.result-card.active {
  box-shadow: 0 28px 55px rgba(17, 20, 38, 0.14);
}

/* Reveal polish: preserve the site's existing reveal system. */
.reveal {
  will-change: transform, opacity;
}

@keyframes agencyOrbit {
  to {
    transform: rotate(351deg) scale(0.92);
  }
}
@keyframes ambientPulse {
  0%,
  100% {
    transform: scale(0.88);
    opacity: 0.55;
  }
  50% {
    transform: scale(1.15);
    opacity: 1;
  }
}
@keyframes modalRise {
  from {
    opacity: 0;
    transform: translateY(28px) scale(0.975);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes modalFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes processSpin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes processSpinReverse {
  to {
    transform: rotate(-360deg);
  }
}
@keyframes processDot {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(8px, -10px) scale(1.5);
  }
}

@media (max-width: 800px) {
  .hero-world::after {
    inset: 8% 2% 10%;
  }
  .service-card::after {
    display: none;
  }
  .result-card.active {
    box-shadow: 0 18px 38px rgba(17, 20, 38, 0.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-world::after,
  .hero-world::before,
  .process-art::before,
  .process-art::after,
  .process-art i,
  .service-modal.open .modal-panel,
  .service-modal.open .modal-backdrop {
    animation: none !important;
  }
  html {
    scroll-behavior: auto;
  }
}

/* ============================================================
   DEVX4 CINEMATIC MOTION LAYER
   Keeps existing copy/layout intact; adds visible scroll storytelling.
   ============================================================ */
.cinematic-section {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
.cinematic-section .section-portal {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  z-index: 20;
  pointer-events: none;
  opacity: 0;
}
.cinematic-section .section-portal-left {
  left: 0;
  transform-origin: right center;
  background: linear-gradient(
    90deg,
    rgba(10, 15, 30, 0.97),
    rgba(10, 15, 30, 0.88)
  );
}
.cinematic-section .section-portal-right {
  right: 0;
  transform-origin: left center;
  background: linear-gradient(
    270deg,
    rgba(10, 15, 30, 0.97),
    rgba(10, 15, 30, 0.88)
  );
}
.cinematic-section .section-portal-left::after,
.cinematic-section .section-portal-right::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 100%;
  height: 1px;
  background: var(--interaction-accent);
  box-shadow: 0 0 24px rgba(201, 106, 61, 0.5);
}
.cinematic-section .section-portal-left::after {
  right: 0;
}
.cinematic-section .section-portal-right::after {
  left: 0;
}
.cinematic-section .section-portal-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 24px;
  border: 1px solid var(--interaction-accent);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.2);
  box-shadow:
    0 0 0 0 rgba(201, 106, 61, 0.2),
    0 0 28px rgba(201, 106, 61, 0.45);
  z-index: 21;
}
.cinematic-section.cinematic-active .section-portal-left {
  animation: portalLeftOpen 0.9s cubic-bezier(0.76, 0, 0.24, 1) both;
}
.cinematic-section.cinematic-active .section-portal-right {
  animation: portalRightOpen 0.9s cubic-bezier(0.76, 0, 0.24, 1) both;
}
.cinematic-section.cinematic-active .section-portal-core {
  animation: portalCoreBurst 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Big editorial entrance: headings split from opposite sides, then settle. */
.cinematic-section .cinematic-heading {
  opacity: 0;
  clip-path: inset(0 50% 0 50%);
  transform: scale(0.96);
}
.cinematic-section.cinematic-active .cinematic-heading {
  animation: headlineReveal 1.05s cubic-bezier(0.16, 1, 0.3, 1) 0.22s both;
}
.cinematic-section .cinematic-left {
  opacity: 0;
  transform: translate3d(-90px, 18px, 0);
}
.cinematic-section .cinematic-right {
  opacity: 0;
  transform: translate3d(90px, 18px, 0);
}
.cinematic-section.cinematic-active .cinematic-left {
  animation: cinematicLeft 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.42s both;
}
.cinematic-section.cinematic-active .cinematic-right {
  animation: cinematicRight 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.48s both;
}

/* Service cards arrive in a staggered, agency-showcase sequence. */
.cinematic-section .service-card {
  opacity: 0;
  transform: translate3d(0, 70px, 0) rotateX(8deg) scale(0.96);
}
.cinematic-section.cinematic-active .service-card {
  animation: cardLift 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.cinematic-section.cinematic-active .service-card:nth-child(1) {
  animation-delay: 0.18s;
}
.cinematic-section.cinematic-active .service-card:nth-child(2) {
  animation-delay: 0.25s;
}
.cinematic-section.cinematic-active .service-card:nth-child(3) {
  animation-delay: 0.32s;
}
.cinematic-section.cinematic-active .service-card:nth-child(4) {
  animation-delay: 0.39s;
}
.cinematic-section.cinematic-active .service-card:nth-child(5) {
  animation-delay: 0.46s;
}
.cinematic-section.cinematic-active .service-card:nth-child(6) {
  animation-delay: 0.53s;
}
.cinematic-section.cinematic-active .service-card:nth-child(7) {
  animation-delay: 0.6s;
}

/* Work/results use depth instead of generic fade-in. */
.cinematic-section .case-study {
  opacity: 0;
  transform: translate3d(0, 85px, 0) scale(0.97);
}
.cinematic-section.cinematic-active .case-study {
  animation: caseRise 0.95s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.cinematic-section.cinematic-active .case-study:nth-of-type(2) {
  animation-delay: 0.16s;
}
.cinematic-section .result-card {
  opacity: 0;
  transform: translate3d(0, 65px, 0) rotateY(9deg) scale(0.94);
}
.cinematic-section.cinematic-active .result-card {
  animation: resultRise 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.cinematic-section.cinematic-active .result-card:nth-child(1) {
  animation-delay: 0.16s;
}
.cinematic-section.cinematic-active .result-card:nth-child(2) {
  animation-delay: 0.23s;
}
.cinematic-section.cinematic-active .result-card:nth-child(3) {
  animation-delay: 0.3s;
}
.cinematic-section.cinematic-active .result-card:nth-child(4) {
  animation-delay: 0.37s;
}
.cinematic-section.cinematic-active .result-card:nth-child(5) {
  animation-delay: 0.44s;
}
.cinematic-section.cinematic-active .result-card:nth-child(6) {
  animation-delay: 0.51s;
}

/* Add a moving beam behind the active section without altering its content. */
.cinematic-section::after {
  content: "";
  position: absolute;
  left: -15%;
  top: 18%;
  width: 130%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(201, 106, 61, 0.35),
    transparent
  );
  transform: translateX(-35%) scaleX(0.5);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}
.cinematic-section.cinematic-active::after {
  animation: beamSweep 1.5s ease-out 0.12s both;
}

@keyframes portalLeftOpen {
  0% {
    opacity: 1;
    transform: scaleX(1);
  }
  62% {
    opacity: 1;
    transform: scaleX(0.14);
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}
@keyframes portalRightOpen {
  0% {
    opacity: 1;
    transform: scaleX(1);
  }
  62% {
    opacity: 1;
    transform: scaleX(0.14);
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}
@keyframes portalCoreBurst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2);
  }
  22% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.5);
    box-shadow:
      0 0 0 18px rgba(201, 106, 61, 0.06),
      0 0 42px rgba(201, 106, 61, 0.65);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(5);
    box-shadow:
      0 0 0 80px rgba(201, 106, 61, 0),
      0 0 70px rgba(201, 106, 61, 0);
  }
}
@keyframes headlineReveal {
  0% {
    opacity: 0;
    clip-path: inset(0 50% 0 50%);
    transform: scale(0.96);
  }
  55% {
    opacity: 1;
    clip-path: inset(0 4% 0 4%);
    transform: scale(1.01);
  }
  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: scale(1);
  }
}
@keyframes cinematicLeft {
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes cinematicRight {
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes cardLift {
  0% {
    opacity: 0;
    transform: translate3d(0, 70px, 0) rotateX(8deg) scale(0.96);
  }
  70% {
    opacity: 1;
    transform: translate3d(0, -7px, 0) rotateX(0) scale(1.01);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateX(0) scale(1);
  }
}
@keyframes caseRise {
  0% {
    opacity: 0;
    transform: translate3d(0, 85px, 0) scale(0.97);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}
@keyframes resultRise {
  0% {
    opacity: 0;
    transform: translate3d(0, 65px, 0) rotateY(9deg) scale(0.94);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateY(0) scale(1);
  }
}
@keyframes beamSweep {
  0% {
    opacity: 0;
    transform: translateX(-35%) scaleX(0.5);
  }
  25% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(35%) scaleX(1);
  }
}

@media (max-width: 800px) {
  .cinematic-section .section-portal {
    width: 50%;
  }
  .cinematic-section .cinematic-left {
    transform: translate3d(-45px, 12px, 0);
  }
  .cinematic-section .cinematic-right {
    transform: translate3d(45px, 12px, 0);
  }
  .cinematic-section .service-card {
    transform: translate3d(0, 45px, 0) scale(0.97);
  }
  .cinematic-section .case-study {
    transform: translate3d(0, 55px, 0) scale(0.98);
  }
  .cinematic-section .result-card {
    transform: translate3d(0, 45px, 0) scale(0.96);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cinematic-section .section-portal,
  .cinematic-section .section-portal-core,
  .cinematic-section .cinematic-heading,
  .cinematic-section .cinematic-left,
  .cinematic-section .cinematic-right,
  .cinematic-section .service-card,
  .cinematic-section .case-study,
  .cinematic-section .result-card {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}

/* ============================================================
   DEVX4 — DISTINCT SECTION-BY-SECTION MOTION
   These overrides intentionally replace the repetitive generic
   entrance with a different interaction language per section.
   ============================================================ */

.devx4-motion {
  position: relative;
  overflow: hidden;
}
.devx4-motion > .wrap {
  position: relative;
  z-index: 3;
}

/* ---------- SERVICES: split-screen capability launch ---------- */
.motion-services::before,
.motion-services::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  background: var(--navy, #111426);
  z-index: 1;
  pointer-events: none;
  transform: scaleX(0);
}
.motion-services::before {
  left: 0;
  transform-origin: left center;
}
.motion-services::after {
  right: 0;
  transform-origin: right center;
}
.motion-services.motion-active::before {
  animation: servicesCurtainLeft 1.15s cubic-bezier(0.76, 0, 0.24, 1) both;
}
.motion-services.motion-active::after {
  animation: servicesCurtainRight 1.15s cubic-bezier(0.76, 0, 0.24, 1) both;
}
.motion-services .services-intro {
  position: relative;
  z-index: 5;
}
.motion-services .services-intro h2 {
  opacity: 0;
  transform: translateY(50px) scale(0.92);
  filter: blur(8px);
}
.motion-services.motion-active .services-intro h2 {
  animation: servicesTitle 1s cubic-bezier(0.16, 1, 0.3, 1) 0.52s both;
}
.motion-services .service-card {
  opacity: 0;
  transform: translate3d(calc(var(--side, -120px)), 70px, 0)
    rotate(var(--rot, -3deg)) scale(0.92);
  transform-origin: center bottom;
  animation: none !important;
}
.motion-services .service-card.from-left {
  --side: -120px;
  --rot: -3deg;
}
.motion-services .service-card.from-right {
  --side: 120px;
  --rot: 3deg;
}
.motion-services.motion-active .service-card {
  animation: serviceLaunch 0.95s cubic-bezier(0.16, 1, 0.3, 1)
    calc(0.58s + var(--motion-index) * 0.075s) both !important;
}
.motion-services .service-card-media {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.motion-services .service-card:hover .service-card-media {
  transform: scale(1.045) rotate(-1deg);
}

/* ---------- WORK: editorial split + image wipe ---------- */
.motion-work .work-title h2 {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transform: translateX(-45px);
}
.motion-work.motion-active .work-title h2 {
  animation: workTitleWipe 1s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}
.motion-work .case-study {
  opacity: 0;
  animation: none !important;
}
.motion-work .work-from-left {
  transform: translateX(-120px) rotate(-2deg);
}
.motion-work .work-from-right {
  transform: translateX(120px) rotate(2deg);
}
.motion-work.motion-active .work-from-left {
  animation: workLeft 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both !important;
}
.motion-work.motion-active .work-from-right {
  animation: workRight 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.58s both !important;
}
.motion-work .case-art {
  overflow: hidden;
}
.motion-work .case-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--paper, #f7f6f2);
  transform: scaleX(1);
  transform-origin: right center;
  z-index: 8;
  pointer-events: none;
}
.motion-work.motion-active .case-art::after {
  animation: imageWipe 1.05s cubic-bezier(0.76, 0, 0.24, 1) 0.55s both;
}
.motion-work .case-art > * {
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.motion-work.motion-active .vash-art .poster {
  animation: posterFloat 1.4s ease-out 0.75s both;
}
.motion-work.motion-active .aavara-art .browser {
  animation: browserFloat 1.4s ease-out 0.95s both;
}

/* ---------- RESULTS: dashboard deck / carousel entrance ---------- */
.motion-results .results-head > div:first-child,
.motion-results .results-head > p {
  opacity: 0;
  transform: translateY(45px);
}
.motion-results.motion-active .results-head > div:first-child {
  animation: resultHeading 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}
.motion-results.motion-active .results-head > p {
  animation: resultHeading 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both;
}
.motion-results .results-track {
  perspective: 1200px;
}
.motion-results .result-card {
  opacity: 0;
  transform: translate3d(0, 90px, 0) rotateY(24deg)
    rotateZ(calc((var(--motion-index) - 2) * 1.2deg)) scale(0.82);
  animation: none !important;
}
.motion-results.motion-active .result-card {
  animation: resultDeck 0.9s cubic-bezier(0.16, 1, 0.3, 1)
    calc(0.35s + var(--motion-index) * 0.1s) both !important;
}
.motion-results.motion-active .result-card-center {
  animation-name: resultDeckCenter !important;
}
.motion-results .result-card:hover {
  transform: translateY(-12px) scale(1.03);
  z-index: 10;
}
.motion-results .results-hint {
  opacity: 0;
}
.motion-results.motion-active .results-hint {
  animation: hintReveal 0.7s ease-out 1.1s both;
}

/* ---------- PROCESS: tab-to-tab kinetic stage ---------- */
.motion-process .process-heading h2 {
  opacity: 0;
  transform: scale(0.75);
  letter-spacing: 0.08em;
}
.motion-process.motion-active .process-heading h2 {
  animation: processTitle 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}
.motion-process .process-tabs {
  opacity: 0;
  transform: translateY(35px);
}
.motion-process.motion-active .process-tabs {
  animation: tabsRise 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
}
.motion-process .process-display {
  opacity: 0;
  transform: translateY(70px) scale(0.94);
}
.motion-process.motion-active .process-display {
  animation: processStage 1s cubic-bezier(0.16, 1, 0.3, 1) 0.55s both;
}
.motion-process .process-art {
  animation: processOrbit 10s linear infinite;
}
.motion-process .process-display.process-swap {
  animation: processSwap 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ---------- DIFFERENT: cards assemble from the corners ---------- */
.motion-different .two-col h2 {
  opacity: 0;
  transform: translateX(-80px);
}
.motion-different .two-col .copy {
  opacity: 0;
  transform: translateX(80px);
}
.motion-different.motion-active .two-col h2 {
  animation: differenceTitle 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}
.motion-different.motion-active .two-col .copy {
  animation: differenceCopy 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.22s both;
}
.motion-different .difference-grid article {
  opacity: 0;
  transform: translate3d(calc(var(--motion-index) * 40px - 40px), 80px, 0)
    scale(0.86) rotate(calc((var(--motion-index) - 1.5) * 2deg));
}
.motion-different.motion-active .difference-grid article {
  animation: tileAssemble 0.8s cubic-bezier(0.16, 1, 0.3, 1)
    calc(0.4s + var(--motion-index) * 0.1s) both;
}
.motion-different .difference-grid article:hover {
  transform: translateY(-10px) rotate(-1deg) scale(1.02);
}

/* ---------- INDUSTRIES: horizontal conveyor / editorial list ---------- */
.motion-industries .section-title h2 {
  opacity: 0;
  transform: translateX(120px);
}
.motion-industries.motion-active .section-title h2 {
  animation: industriesTitle 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}
.motion-industries .industry-list article {
  opacity: 0;
  transform: translateX(110px) skewX(-4deg);
}
.motion-industries.motion-active .industry-list article {
  animation: industrySlide 0.75s cubic-bezier(0.16, 1, 0.3, 1)
    calc(0.35s + var(--motion-index) * 0.1s) both;
}
.motion-industries .industry-art {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.motion-industries .industry-list article:hover .industry-art {
  transform: scale(1.07) translateX(-8px);
}

/* ---------- REVIEWS: quote marks + text reveal ---------- */
.motion-reviews .section-title h2 {
  opacity: 0;
  transform: translateY(70px);
  clip-path: inset(100% 0 0 0);
}
.motion-reviews.motion-active .section-title h2 {
  animation: reviewTitle 1s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}
.motion-reviews .quote {
  opacity: 0;
  transform: translateY(90px);
  clip-path: inset(0 0 100% 0);
}
.motion-reviews.motion-active .quote {
  animation: quoteReveal 0.95s cubic-bezier(0.16, 1, 0.3, 1)
    calc(0.45s + var(--motion-index) * 0.18s) both !important;
}
.motion-reviews .quote > span {
  transform: scale(0);
  transform-origin: left top;
}
.motion-reviews.motion-active .quote > span {
  animation: quoteMark 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.75s both;
}
.motion-reviews .stars {
  letter-spacing: 0.1em;
}
.motion-reviews.motion-active .stars {
  animation: starsReveal 0.7s ease-out 0.85s both;
}

/* ---------- CONTACT: final portal / conversion moment ---------- */
.motion-contact {
  overflow: hidden;
}
.motion-contact::before,
.motion-contact::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(201, 106, 61, 0.28);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.1);
  opacity: 0;
  pointer-events: none;
}
.motion-contact::before {
  width: 30vw;
  height: 30vw;
}
.motion-contact::after {
  width: 55vw;
  height: 55vw;
  border-style: dashed;
}
.motion-contact.motion-active::before {
  animation: contactPortal 1.8s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}
.motion-contact.motion-active::after {
  animation: contactPortal 2.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}
.motion-contact .contact-content h2 {
  opacity: 0;
  transform: scale(0.72);
  filter: blur(10px);
}
.motion-contact.motion-active .contact-content h2 {
  animation: contactTitle 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both;
}
.motion-contact .contact-content > p,
.motion-contact .contact-content .button,
.motion-contact .contact-content small {
  opacity: 0;
  transform: translateY(35px);
}
.motion-contact.motion-active .contact-content > p {
  animation: contactCopy 0.7s ease-out 0.8s both;
}
.motion-contact.motion-active .contact-content .button {
  animation: contactCopy 0.7s ease-out 0.92s both;
}
.motion-contact.motion-active .contact-content small {
  animation: contactCopy 0.7s ease-out 1.04s both;
}

/* Keyframes */
@keyframes servicesCurtainLeft {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}
@keyframes servicesCurtainRight {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}
@keyframes servicesTitle {
  0% {
    opacity: 0;
    transform: translateY(50px) scale(0.92);
    filter: blur(8px);
  }
  70% {
    opacity: 1;
    transform: translateY(-6px) scale(1.01);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: none;
    filter: none;
  }
}
@keyframes serviceLaunch {
  0% {
    opacity: 0;
    transform: translate3d(var(--side), 70px, 0) rotate(var(--rot)) scale(0.92);
  }
  70% {
    opacity: 1;
    transform: translate3d(0, -8px, 0) rotate(0) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes workTitleWipe {
  0% {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transform: translateX(-45px);
  }
  100% {
    opacity: 1;
    clip-path: inset(0);
    transform: none;
  }
}
@keyframes workLeft {
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes workRight {
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes imageWipe {
  to {
    transform: scaleX(0);
  }
}
@keyframes posterFloat {
  0% {
    transform: translateY(30px) rotate(-4deg);
  }
  100% {
    transform: none;
  }
}
@keyframes browserFloat {
  0% {
    transform: translateY(30px) scale(0.96);
  }
  100% {
    transform: none;
  }
}
@keyframes resultHeading {
  from {
    opacity: 0;
    transform: translateY(45px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes resultDeck {
  0% {
    opacity: 0;
    transform: translate3d(0, 90px, 0) rotateY(24deg) scale(0.82);
  }
  70% {
    opacity: 1;
    transform: translate3d(0, -12px, 0) rotateY(-2deg) scale(1.015);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes resultDeckCenter {
  0% {
    opacity: 0;
    transform: translate3d(0, 110px, 0) rotateY(0) scale(0.7);
  }
  70% {
    opacity: 1;
    transform: translate3d(0, -18px, 0) scale(1.04);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes hintReveal {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes processTitle {
  0% {
    opacity: 0;
    transform: scale(0.75);
    letter-spacing: 0.08em;
  }
  70% {
    opacity: 1;
    transform: scale(1.03);
    letter-spacing: 0;
  }
  100% {
    opacity: 1;
    transform: none;
    letter-spacing: normal;
  }
}
@keyframes tabsRise {
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes processStage {
  0% {
    opacity: 0;
    transform: translateY(70px) scale(0.94);
  }
  70% {
    opacity: 1;
    transform: translateY(-8px) scale(1.01);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes processSwap {
  0% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  45% {
    opacity: 0;
    transform: translateX(-30px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}
@keyframes processOrbit {
  to {
    transform: rotate(360deg);
  }
}
@keyframes differenceTitle {
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes differenceCopy {
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes tileAssemble {
  0% {
    opacity: 0;
    transform: translateY(80px) scale(0.86) rotate(4deg);
  }
  70% {
    opacity: 1;
    transform: translateY(-7px) scale(1.02) rotate(-0.5deg);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes industriesTitle {
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes industrySlide {
  0% {
    opacity: 0;
    transform: translateX(110px) skewX(-4deg);
  }
  70% {
    opacity: 1;
    transform: translateX(-6px) skewX(0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes reviewTitle {
  0% {
    opacity: 0;
    transform: translateY(70px);
    clip-path: inset(100% 0 0 0);
  }
  100% {
    opacity: 1;
    transform: none;
    clip-path: inset(0);
  }
}
@keyframes quoteReveal {
  0% {
    opacity: 0;
    transform: translateY(90px);
    clip-path: inset(0 0 100% 0);
  }
  100% {
    opacity: 1;
    transform: none;
    clip-path: inset(0);
  }
}
@keyframes quoteMark {
  to {
    transform: scale(1);
  }
}
@keyframes starsReveal {
  from {
    opacity: 0;
    letter-spacing: 0.6em;
    transform: translateX(-12px);
  }
  to {
    opacity: 1;
    letter-spacing: 0.1em;
    transform: none;
  }
}
@keyframes contactPortal {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.1);
  }
  35% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
  }
}
@keyframes contactTitle {
  0% {
    opacity: 0;
    transform: scale(0.72);
    filter: blur(10px);
  }
  65% {
    opacity: 1;
    transform: scale(1.04);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes contactCopy {
  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 800px) {
  .motion-services .service-card.from-left {
    --side: -55px;
  }
  .motion-services .service-card.from-right {
    --side: 55px;
  }
  .motion-contact::before {
    width: 70vw;
    height: 70vw;
  }
  .motion-contact::after {
    width: 105vw;
    height: 105vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .devx4-motion *,
  .devx4-motion::before,
  .devx4-motion::after {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
}