:root {
  --red: #2b59f3;
  --white: #fcfcff;
  --silver: #cfeee8;
  --mid: #6d68a8;
  --grey: #57528c;
  --dark: #292365;
  --line: #dbe4ff;
}

body {
  color: var(--dark);
  background: var(--white);
}

header {
  background: linear-gradient(90deg, #eef4ff 0%, #f5f0ff 48%, #ebfbf6 100%);
  border-bottom-color: #d7e5f7;
}

.logo-cube {
  background: transparent;
}

.brand .logo-cube img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: fill;
  mix-blend-mode: multiply;
  transform: none;
}

.brand span {
  color: #ef1b23;
  background: none;
  -webkit-text-fill-color: #ef1b23;
}

.label {
  color: #285af2;
}

.label i {
  background: #18bfad;
}

.hero .label {
  color: #7655e9;
  background: linear-gradient(90deg, #7655e9, #9c4fd2, #285af2);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero .label i {
  background: linear-gradient(135deg, #7655e9, #b14bc6);
}

header > .brand,
footer > .brand {
  transform: scale(1.1);
  transform-origin: left center;
}

h1 em,
h2 em {
  color: #285af2;
  background: linear-gradient(95deg, #285af2 0%, #19bdb3 42%, #45c96f 68%, #7954e8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.intro {
  color: #57528c;
}

.primary,
.red-disc {
  background: linear-gradient(135deg, #285af2 0%, #17bfc0 48%, #7655e9 100%);
}

.service-image::after,
.work-card::after {
  background: linear-gradient(135deg, #285af2 0%, #17bfc0 48%, #7655e9 100%);
}

.primary b,
.talk b {
  color: #19bda9;
}

.ticker,
.marquee,
.footer-cta {
  background: linear-gradient(90deg, #285af2 0%, #17bfb1 35%, #47c96f 60%, #7655e9 100%);
}

.section-label,
.eyebrow,
.kicker {
  color: #285af2;
}

.services {
  background: linear-gradient(145deg, #edf3ff 0%, #f3efff 100%);
}

.service-grid article:nth-child(4n + 1),
.service-card:nth-child(4n + 1),
.work-card:nth-child(4n + 1) {
  background-color: #e5edff;
}

.service-grid article:nth-child(4n + 2),
.service-card:nth-child(4n + 2),
.work-card:nth-child(4n + 2) {
  background-color: #dcf7ed;
}

.service-grid article:nth-child(4n + 3),
.service-card:nth-child(4n + 3),
.work-card:nth-child(4n + 3) {
  background-color: #eee8ff;
}

.service-grid article:nth-child(4n),
.service-card:nth-child(4n),
.work-card:nth-child(4n) {
  background-color: #fff2a8;
}

.visual-story {
  background: #eef8f5;
}

.imagine-option {
  border-color: #eef8f5;
}

.visual-frame::after {
  background: linear-gradient(135deg, transparent 55%, rgba(40, 90, 242, 0.62));
}

.visual-frame span,
.tenry-image > span {
  background: linear-gradient(100deg, #285af2, #16bfb0, #7655e9);
}

.texture-fold {
  overflow: hidden;
  background:
    radial-gradient(circle at 84% 18%, rgba(255, 235, 137, 0.56), transparent 29%),
    radial-gradient(circle at 12% 88%, rgba(66, 218, 158, 0.48), transparent 32%),
    linear-gradient(135deg, #304fd0 0%, #167f9d 48%, #6748c8 100%);
}

.texture-fold h2 {
  color: #ffffff;
}

.texture-fold h2 em {
  color: #fff0a8;
  background: none;
  -webkit-text-fill-color: #fff0a8;
}

.matrix-visual {
  min-height: 620px;
  overflow: hidden;
  border: 0 !important;
  border-radius: 0;
  outline: 0;
  box-shadow: none !important;
  background: url("https://dhrish-innovations-design.kumtej.chatgpt.site/preview/assets/texturefold-wall-gold-unroll.png") center / cover no-repeat;
  transform: scale(1.08);
  transform-origin: center;
}

.matrix-visual::before,
.matrix-visual::after,
.matrix-paper,
.matrix-roll {
  display: none !important;
}

.matrix-visual::before {
  content: "";
  display: block !important;
  position: absolute;
  inset: 0 26% 0 0;
  z-index: 1;
  pointer-events: none;
  background: #d9a52f;
  mix-blend-mode: color;
  opacity: 0.56;
  animation: textureWallPalette 16s ease-in-out infinite;
}

.matrix-visual::after {
  content: "";
  display: block !important;
  position: absolute;
  right: 1.5%;
  bottom: 5.5%;
  z-index: 2;
  width: 43%;
  height: 27%;
  pointer-events: none;
  border: 0;
  border-radius: 54% 9% 14% 58%;
  background: linear-gradient(165deg, rgba(255,255,255,0) 5%, rgba(255,255,255,0.34) 48%, rgba(226,230,238,0.12) 100%);
  filter: blur(1px);
  transform-origin: right center;
  animation: textureRollMotion 8s ease-in-out infinite;
}

.matrix-visual > p {
  top: 9%;
  right: auto;
  bottom: auto;
  left: 7%;
  z-index: 3;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #ffffff;
  background: transparent !important;
  backdrop-filter: none;
  box-shadow: none !important;
  font-size: 0;
  text-shadow: 0 2px 18px rgba(54, 37, 78, 0.24);
}

.matrix-visual > p::after {
  display: none !important;
}

.matrix-visual > p::before {
  content: "TextureFold\2122";
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(30px, 4.5vw, 58px);
  font-weight: 700;
  letter-spacing: -0.045em;
}

@keyframes textureWallPalette {
  0%, 100% { background: #c99624; opacity: 0.46; }
  20% { background: #efc9a9; opacity: 0.38; }
  40% { background: #195f66; opacity: 0.54; }
  60% { background: #6841a8; opacity: 0.5; }
  80% { background: #c55c75; opacity: 0.42; }
}

@keyframes textureRollMotion {
  0%, 100% { transform: scaleX(0.78) translateX(5%); opacity: 0.3; }
  48% { transform: scaleX(1) translateX(0); opacity: 0.62; }
  58% { transform: scaleX(1) translateX(0); opacity: 0.62; }
}

@media (prefers-reduced-motion: reduce) {
  .matrix-visual::before,
  .matrix-visual::after {
    animation: none;
  }
}

.matrix-visual > p {
  left: 26px;
  bottom: 24px;
  padding: 9px 13px;
  border-radius: 5px;
  color: #4e3a84;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(7px);
}

.matrix-copy > .label {
  color: #fff4ad !important;
  opacity: 1 !important;
  visibility: visible !important;
  letter-spacing: 0.13em;
}

.matrix-uses {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.34);
}

.matrix-uses span,
.matrix-uses span:nth-child(3n + 2),
.matrix-uses span:nth-child(3n) {
  position: relative;
  padding: 14px 10px 14px 24px;
  color: #ffffff;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 0;
  background: transparent;
}

.matrix-uses span::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  width: 10px;
  height: 2px;
  transform: translateY(-50%);
  background: #fff0a8;
}

.work-card > div {
  background: linear-gradient(transparent, rgba(42, 35, 101, 0.93));
}

.work-card span {
  color: #b8fff0;
}

.sketch-card img {
  filter: none;
}

.footer-logo {
  overflow: hidden;
  background: transparent;
}

.footer-logo img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: fill;
  mix-blend-mode: multiply;
}

footer .brand > span:last-child {
  color: #ef1b23;
  -webkit-text-fill-color: #ef1b23;
}

.work {
  background: #fcfcff;
}

.export-focus {
  color: #302873;
  background:
    radial-gradient(circle at 86% 12%, rgba(255, 239, 151, 0.82), transparent 32%),
    linear-gradient(120deg, #dfe9ff 0%, #dff8ef 50%, #ebe3ff 100%);
}

.export-focus h2 em {
  background: linear-gradient(90deg, #285af2, #16bfae, #7655e9);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.export-focus::after,
.export-focus > span {
  border-color: rgba(68, 78, 163, 0.24);
}

.industries {
  background: #eef3ff;
}

.process {
  background: #fcfcff;
}

.process .process-flow {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 34px;
  align-items: stretch;
}

.process .flow-line,
.process .flow-line i {
  display: none !important;
}

.process .process-flow > p {
  margin: 0;
  padding: 28px 30px;
  border: 1px solid rgba(118, 85, 233, 0.2);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(235, 227, 255, 0.82), rgba(222, 248, 239, 0.76));
}

.hero .label {
  color: #7655e9 !important;
  background: linear-gradient(90deg, #6036d8 0%, #8b45df 48%, #bd58cc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.16em;
}

.hero .label i {
  background: #8b45df !important;
}

.manifesto > .label,
.services .section-title > .label {
  display: inline-block;
  color: #6842cb;
  background: linear-gradient(90deg, #6842cb, #a34bc9, #168f9a);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.14em;
}

header > .brand > span:last-child,
footer > .brand > span:last-child {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  letter-spacing: 0.075em;
  line-height: 0.96;
}

main {
  background: #f1f4fb;
}

header,
.hero {
  background: transparent !important;
}

header {
  position: relative;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

header::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: min(360px, 46vw);
  pointer-events: none;
  background: linear-gradient(90deg, rgba(84, 60, 170, 0.1), transparent);
}

header > * {
  position: relative;
  z-index: 1;
}

.logo-cube,
.footer-logo {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.logo-cube,
.footer-logo {
  background: url("https://dhrish-innovations-design.kumtej.chatgpt.site/preview/assets/dhrish-logo-transparent.png") center / contain no-repeat !important;
}

.logo-cube img,
.footer-logo img {
  opacity: 0;
}

.logo-cube img,
.footer-logo img {
  mix-blend-mode: multiply;
}

@media (max-width: 760px) {
  .process .process-flow {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* TextureFold motion: clean wall plate plus a true connected roll/sheet animation. */
.matrix-visual {
  background-image: url("https://dhrish-innovations-design.kumtej.chatgpt.site/preview/assets/texturefold-wall-clean.png");
}

.matrix-visual::before,
.matrix-visual::after {
  display: none !important;
  animation: none !important;
}

.matrix-paper {
  display: block !important;
  position: absolute;
  top: auto !important;
  right: 12% !important;
  bottom: 9% !important;
  left: auto !important;
  z-index: 3;
  width: 52%;
  height: 18%;
  border: 1px solid rgba(171, 178, 194, 0.34);
  border-radius: 10px 5px 8px 18px;
  background:
    repeating-linear-gradient(8deg, rgba(150,158,176,0.06) 0 1px, transparent 1px 7px),
    linear-gradient(165deg, #ffffff, #edf0f5 58%, #ffffff);
  box-shadow: 0 18px 28px rgba(47, 45, 80, 0.16);
  transform-origin: right center;
  animation: textureSheetWrap 8s ease-in-out infinite;
}

.matrix-paper::before,
.matrix-paper::after {
  display: none !important;
}

.matrix-paper i {
  display: none !important;
}

.matrix-roll {
  display: block !important;
  position: absolute;
  top: auto !important;
  right: 4.8% !important;
  bottom: 6.8% !important;
  left: auto !important;
  z-index: 5;
  width: 142px;
  height: 92px;
  border: 1px solid rgba(168, 175, 190, 0.5);
  border-radius: 52% 18px 18px 52%;
  background: linear-gradient(180deg, #ffffff 0%, #e8ebf1 52%, #ffffff 100%);
  box-shadow: 0 16px 24px rgba(46, 43, 76, 0.2);
  animation: textureRollTurn 8s ease-in-out infinite;
}

.matrix-roll::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -3px;
  width: 68px;
  height: 92px;
  border-radius: 48%;
  background:
    radial-gradient(ellipse at center, #f8f9fc 0 18%, #7d62d8 19% 22%, #57c9c1 23% 25%, #f5f6fa 26% 63%, #d9dde7 64% 67%, #ffffff 68%);
  box-shadow: inset -4px -3px 10px rgba(99, 105, 132, 0.14);
}

.matrix-roll b {
  display: none !important;
}

.matrix-visual > p::before {
  font-size: clamp(22px, 3vw, 40px);
}

@keyframes textureSheetWrap {
  0%, 12%, 100% { transform: perspective(700px) rotateX(7deg) scaleX(0.34); }
  45%, 66% { transform: perspective(700px) rotateX(2deg) scaleX(1); }
  82% { transform: perspective(700px) rotateX(5deg) scaleX(0.56); }
}

@keyframes textureRollTurn {
  0%, 12%, 100% { transform: rotate(-3deg) translateX(0); }
  45%, 66% { transform: rotate(3deg) translateX(5px); }
  82% { transform: rotate(-1deg) translateX(2px); }
}

/* Final original animation replaces all photo and CSS-shape experiments. */
.matrix-visual {
  min-height: 620px;
  transform: none;
  background: url("https://dhrish-innovations-design.kumtej.chatgpt.site/preview/assets/texturefold-living-room.png") center / cover no-repeat;
}

.matrix-visual::before,
.matrix-visual::after,
.matrix-paper,
.matrix-roll {
  display: none !important;
  animation: none !important;
}

.matrix-visual > p {
  display: none !important;
}

/* Ultra-modern room with a separate realistic drop, bounce and unroll layer. */
.matrix-visual {
  background-image: url("https://dhrish-innovations-design.kumtej.chatgpt.site/preview/assets/texturefold-ultramodern-gold.png");
}

.matrix-paper {
  display: block !important;
  position: absolute;
  top: auto !important;
  right: 13% !important;
  bottom: 4.8% !important;
  left: auto !important;
  z-index: 4;
  width: 42%;
  height: 8.5%;
  border: 0;
  border-radius: 7px 0 0 7px;
  background:
    repeating-linear-gradient(7deg, rgba(120,130,150,.045) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, #ffffff, #eef1f5 62%, #ffffff);
  box-shadow: 0 15px 25px rgba(38, 35, 75, .17);
  transform-origin: right center;
  animation: floorSheetUnroll 9s ease-in-out infinite !important;
}

.matrix-roll {
  display: block !important;
  position: absolute;
  top: auto !important;
  right: 4.5% !important;
  bottom: 1.8% !important;
  left: auto !important;
  z-index: 6;
  width: 165px;
  height: 165px;
  border: 0;
  border-radius: 0;
  background: url("https://dhrish-innovations-design.kumtej.chatgpt.site/preview/assets/texturefold-roll-cutout.png") center / contain no-repeat;
  box-shadow: none;
  transform-origin: 52% 73%;
  animation: floorRollBounce 9s cubic-bezier(.3,.72,.35,1) infinite !important;
}

.matrix-roll::before,
.matrix-roll::after,
.matrix-roll b,
.matrix-paper::before,
.matrix-paper::after,
.matrix-paper i {
  display: none !important;
}

@keyframes floorRollBounce {
  0% { transform: translateY(-430px) rotate(-95deg); opacity: 0; }
  7% { opacity: 1; }
  22% { transform: translateY(0) rotate(10deg); opacity: 1; }
  29% { transform: translateY(-58px) rotate(-12deg); }
  36% { transform: translateY(0) rotate(0deg); }
  68% { transform: translateY(0) rotate(-210deg); }
  82% { transform: translateY(0) rotate(-210deg); opacity: 1; }
  96%, 100% { transform: translateY(0) rotate(0deg); opacity: 0; }
}

@keyframes floorSheetUnroll {
  0%, 34% { transform: perspective(700px) rotateX(10deg) scaleX(.05); opacity: 0; }
  40% { opacity: 1; }
  68%, 82% { transform: perspective(700px) rotateX(4deg) scaleX(1); opacity: 1; }
  96%, 100% { transform: perspective(700px) rotateX(8deg) scaleX(.08); opacity: 0; }
}

/* Simplified approved motion: two room finishes and one straight roll drop. */
.matrix-visual::before {
  content: "";
  display: block !important;
  position: absolute;
  inset: 0;
  width: auto !important;
  height: auto !important;
  z-index: 1;
  pointer-events: none;
  background: url("https://dhrish-innovations-design.kumtej.chatgpt.site/preview/assets/texturefold-ultramodern-teal-violet.png") center / cover no-repeat;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  filter: none !important;
  transform: none !important;
  transform-origin: center !important;
  mix-blend-mode: normal;
  animation: alternateRoomFinish 18s ease-in-out infinite !important;
}

.matrix-roll {
  right: 3.5% !important;
  bottom: 1.2% !important;
  width: 280px;
  height: 150px;
  background-image: url("https://dhrish-innovations-design.kumtej.chatgpt.site/preview/assets/texturefold-wide-roll.png");
  animation: straightRollDrop 9s ease-out infinite !important;
}

.matrix-paper {
  right: 18% !important;
  bottom: 4.8% !important;
  width: 21%;
  height: 8%;
  animation: halfSheetUnwrap 9s ease-in-out infinite !important;
}

.matrix-paper {
  display: none !important;
  animation: none !important;
}

@keyframes alternateRoomFinish {
  0%, 42% { opacity: 0; }
  50%, 92% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes straightRollDrop {
  0% { transform: translateY(-470px); opacity: 0; }
  8% { opacity: 1; }
  28% { transform: translateY(0); opacity: 1; }
  84% { transform: translateY(0); opacity: 1; }
  96%, 100% { transform: translateY(0); opacity: 0; }
}

@keyframes halfSheetUnwrap {
  0%, 31% { transform: perspective(700px) rotateX(8deg) scaleX(.05); opacity: 0; }
  40% { opacity: 1; }
  62%, 82% { transform: perspective(700px) rotateX(3deg) scaleX(1); opacity: 1; }
  96%, 100% { transform: perspective(700px) rotateX(7deg) scaleX(.08); opacity: 0; }
}

.tenry-copy {
  background: linear-gradient(145deg, #edf3ff, #e7f9f2);
}

.contact {
  background: linear-gradient(145deg, #e4edff 0%, #f0e9ff 50%, #dcf7ed 100%);
}

.contact h2 em {
  background: linear-gradient(90deg, #285af2, #0c9f94, #6c44d4);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.manifesto-note p,
.story-copy > p:last-child,
.intro {
  color: #57528c;
}

button:focus-visible,
a:focus-visible {
  outline-color: #285af2;
}