/* Meroy art-direction layer: kinetic editorial motion built on the stable base. */

:root {
  --page-progress: 0;
  --pointer-x: 50%;
  --pointer-y: 50%;
  --velocity: 0;
  --silk: #f1eee6;
  --soft-blue: #e8eef8;
  --soft-red: #f5e9e5;
  --soft-yellow: #f6efd9;
  --surface: #f5f4ef;
}

html,
body { max-width: 100%; overflow-x: clip; }

body {
  background:
    radial-gradient(circle at 86% 8%, rgba(49,127,236,.11), transparent 22rem),
    radial-gradient(circle at 13% 1%, rgba(251,97,64,.1), transparent 19rem),
    var(--paper);
}

body::before {
  content: "";
  position: fixed;
  z-index: 999;
  inset: 0;
  opacity: .045;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(19,19,21,.16) 3px 4px),
    repeating-linear-gradient(90deg, transparent 0 5px, rgba(19,19,21,.08) 5px 6px);
  mix-blend-mode: multiply;
}

#main:focus { outline: 0; }

.site-header {
  overflow: hidden;
  border-color: rgba(19,19,21,.16);
  background: rgba(255,255,255,.76);
  box-shadow: 0 18px 55px rgba(19,19,21,.09);
}

.site-header::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--red), var(--blue) 48%, var(--yellow));
  transform: scaleX(var(--page-progress));
  transform-origin: left;
}

.site-nav a:not(.nav-cta) { position: relative; }
.site-nav a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: .35rem;
  left: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--ease);
}
.site-nav a:not(.nav-cta):hover::after,
.site-nav a[aria-current="true"]::after { transform: scaleX(1); transform-origin: left; }

.theme-switcher {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  padding: .22rem;
  border: 1px solid rgba(19,19,21,.14);
  border-radius: 999px;
  background: rgba(19,19,21,.045);
}
.theme-switcher button {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  transition: color .35s ease, background .35s ease, transform .35s var(--ease);
}
.theme-switcher button:hover { color: var(--ink); transform: rotate(8deg); }
.theme-switcher button[aria-pressed="true"] { color: #fff; background: var(--ink); box-shadow: 0 6px 18px rgba(19,19,21,.14); }
.theme-switcher svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }

.nav-cta,
.button { position: relative; overflow: hidden; isolation: isolate; }
.nav-cta::before,
.button::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: var(--blue);
  transform: translateY(105%);
  transition: transform .55s var(--ease);
}
.nav-cta:hover::before,
.button:hover::before { transform: translateY(0); }

.creative-thread { z-index: 6; mix-blend-mode: multiply; }
.thread-track { stroke: rgba(19,19,21,.13); stroke-dasharray: 1 8; }
.thread-progress { stroke-width: 3.5; filter: drop-shadow(0 0 9px rgba(49,127,236,.26)); }

.hero {
  overflow: clip;
  isolation: isolate;
  grid-template-columns: minmax(0, 1.18fr) minmax(24rem, .82fr);
  min-height: 108svh;
  padding-top: clamp(9rem, 15vh, 12rem);
  padding-bottom: 8rem;
}

.hero::before {
  content: "";
  position: absolute;
  z-index: -2;
  top: 5%;
  right: -12%;
  width: min(68vw, 62rem);
  aspect-ratio: 1;
  border: 1px solid rgba(19,19,21,.08);
  border-radius: 50%;
  background:
    linear-gradient(45deg, transparent 49.8%, rgba(19,19,21,.08) 50%, transparent 50.2%),
    linear-gradient(-45deg, transparent 49.8%, rgba(19,19,21,.08) 50%, transparent 50.2%);
  transform: rotate(calc(var(--velocity) * 1deg));
}

.hero::after {
  content: "MEROY® / 2026";
  position: absolute;
  z-index: -1;
  top: 9.5rem;
  right: var(--page-pad);
  color: rgba(19,19,21,.42);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .16em;
  writing-mode: vertical-rl;
}

.hero-copy { z-index: 5; }

.hero h1 {
  font-size: clamp(5rem, 10.9vw, 11.6rem);
  line-height: .69;
  perspective: 900px;
}

.hero-word {
  text-shadow: 0 0 0 rgba(19,19,21,0);
  transform-origin: left center;
  will-change: transform;
}

.has-loaded .hero-word { animation: hero-word-in 1.15s var(--ease) both; }
.has-loaded .hero-word:nth-child(2) { animation-delay: .1s; }
.has-loaded .hero-word:nth-child(3) { animation-delay: .2s; }

@keyframes hero-word-in {
  from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateY(48%) rotateX(-16deg); }
  to { opacity: 1; clip-path: inset(0); transform: translateY(0) rotateX(0); }
}

.hero h1:hover .hero-word:not(:hover) { opacity: .2; filter: blur(1.5px); }
.hero h1:hover .hero-word:hover { transform: translateX(.055em) skewX(-3deg); text-shadow: -.035em .035em 0 rgba(19,19,21,.1); }

.hero-intro {
  position: relative;
  max-width: 35rem;
  padding-left: 1.2rem;
  border-left: 3px solid var(--ink);
}

.hero-aside {
  min-height: 42rem;
  transform-style: preserve-3d;
  perspective: 1100px;
}

.hero-reel {
  position: absolute;
  z-index: 0;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform .6s var(--ease);
}

.glass-prism {
  --prism-depth: 2.25rem;
  position: absolute;
  z-index: 1;
  top: 17%;
  left: 6%;
  width: 4.5rem;
  height: 4.5rem;
  opacity: .52;
  transform-style: preserve-3d;
  animation: prism-spin 19s linear infinite;
}
.glass-prism i {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(19,19,21,.24);
  background: linear-gradient(145deg, rgba(255,255,255,.42), rgba(49,127,236,.09));
  box-shadow: inset 0 0 2rem rgba(255,255,255,.22);
  backdrop-filter: blur(3px);
}
.glass-prism i:nth-child(1) { transform: translateZ(var(--prism-depth)); }
.glass-prism i:nth-child(2) { transform: rotateY(180deg) translateZ(var(--prism-depth)); }
.glass-prism i:nth-child(3) { transform: rotateY(90deg) translateZ(var(--prism-depth)); }
.glass-prism i:nth-child(4) { transform: rotateY(-90deg) translateZ(var(--prism-depth)); }
.glass-prism i:nth-child(5) { transform: rotateX(90deg) translateZ(var(--prism-depth)); }
.glass-prism i:nth-child(6) { transform: rotateX(-90deg) translateZ(var(--prism-depth)); }
@keyframes prism-spin { to { transform: rotateX(360deg) rotateY(540deg) rotateZ(180deg); } }

.hero-frame {
  position: absolute;
  overflow: hidden;
  width: clamp(8rem, 12vw, 11.5rem);
  aspect-ratio: 3 / 4;
  margin: 0;
  border: .38rem solid #fff;
  border-bottom-width: 1.9rem;
  background: #ddd;
  box-shadow: 0 25px 80px rgba(19,19,21,.2);
  animation: frame-breathe 7s ease-in-out infinite;
  will-change: transform;
}

.hero-frame img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.72) contrast(1.04); }
.hero-frame span {
  position: absolute;
  right: .2rem;
  bottom: -1.55rem;
  left: .2rem;
  color: var(--ink);
  font-size: .5rem;
  font-weight: 750;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.hero-frame-one { top: 4%; right: 3%; transform: rotate(8deg); }
.hero-frame-two { bottom: 1%; left: 1%; transform: rotate(-9deg); animation-delay: -2s; }
.hero-frame-three { right: -1%; bottom: 12%; width: clamp(6.5rem, 9vw, 8.5rem); transform: rotate(14deg); animation-delay: -4s; }
@keyframes frame-breathe { 50% { translate: 0 -11px; } }

.orbit-card {
  z-index: 2;
  width: min(31vw, 29rem);
  border-color: rgba(19,19,21,.3);
  background: rgba(255,255,255,.28);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.72), 0 30px 90px rgba(19,19,21,.08);
  backdrop-filter: blur(7px);
  animation: orbit-float 8s ease-in-out infinite;
  transform-style: preserve-3d;
}

.orbit-card::before { border-style: dashed; border-color: rgba(19,19,21,.26); animation: spin 24s linear infinite; }
.orbit-card::after { border-color: rgba(19,19,21,.22); animation: spin 14s linear infinite reverse; }
@keyframes orbit-float { 50% { transform: translateY(-12px) rotate(1.5deg); } }
@keyframes spin { to { transform: rotate(360deg); } }

.orbit-core {
  inset: 29%;
  box-shadow: 0 22px 70px rgba(19,19,21,.34), 0 0 0 .7rem rgba(255,255,255,.5);
  transition: transform .55s var(--ease), background .4s ease;
}
.orbit-card:hover .orbit-core { transform: scale(1.035); background: linear-gradient(145deg, var(--ink), #294f86); }
.orbit-label { border-color: rgba(19,19,21,.17); box-shadow: 0 12px 30px rgba(19,19,21,.09); }
.orbit-label::before { content: ""; display: inline-block; width: .42rem; height: .42rem; margin-right: .45rem; border-radius: 50%; background: var(--yellow); }
.orbit-label-three::before { background: var(--red); }
.orbit-label-four::before { background: var(--blue); }

.hero-ticker {
  position: absolute;
  z-index: 4;
  bottom: 0;
  left: 0;
  overflow: hidden;
  width: 100%;
  border-top: 1px solid rgba(19,19,21,.18);
  border-bottom: 1px solid rgba(19,19,21,.18);
  background: linear-gradient(90deg, rgba(245,244,239,.96), rgba(255,255,255,.96) 50%, rgba(232,238,248,.96));
  backdrop-filter: blur(12px);
  transform: none;
}
.hero-ticker div {
  display: flex;
  align-items: center;
  width: max-content;
  animation: ticker 30s linear infinite;
}
.hero-ticker span {
  padding: .8rem 1.35rem;
  font-family: var(--display);
  color: rgba(19,19,21,.74);
  font-size: clamp(.76rem, 1vw, .95rem);
  font-weight: 680;
  letter-spacing: .12em;
  line-height: 1;
  text-transform: uppercase;
}
.hero-ticker i { color: var(--red); opacity: .7; font-size: .5rem; font-style: normal; }
@keyframes ticker { to { transform: translateX(-50%); } }

.scroll-cue { bottom: 5.4rem; }

.ambient-type {
  position: absolute;
  z-index: -1;
  top: 5rem;
  right: 0;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  color: rgba(255,255,255,.045);
  font-family: var(--display);
  font-size: clamp(8rem, 24vw, 25rem);
  font-weight: 820;
  letter-spacing: -.1em;
  line-height: .7;
  pointer-events: none;
  text-align: right;
  text-transform: uppercase;
  transform: translate3d(calc(var(--page-progress) * -5vw), 0, 0);
}
.ambient-type-outline {
  z-index: 0;
  color: transparent;
  opacity: .07;
  -webkit-text-stroke: 2px var(--ink);
}

.about { isolation: isolate; }
.about-heading h2 em { display: inline-block; transform: translateX(clamp(1rem, 6vw, 7rem)); }

.service-grid {
  border: 0;
  gap: .7rem;
  background: transparent;
}
.service-card {
  position: relative;
  overflow: hidden;
  min-height: 24rem;
  border: 1px solid var(--ink);
  border-radius: 1rem;
  background: rgba(255,255,255,.72);
  box-shadow: 0 16px 50px rgba(19,19,21,.04);
  transform-origin: bottom;
}
.service-card::after {
  content: "↗";
  position: absolute;
  top: 1.3rem;
  right: 1.3rem;
  display: grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 1rem;
  transform: rotate(45deg);
  transition: transform .5s var(--ease), background .3s ease;
}
.service-card:nth-child(1):hover { background: var(--soft-red); }
.service-card:nth-child(2):hover { background: var(--soft-blue); }
.service-card:nth-child(3):hover { background: var(--soft-yellow); }
.service-card:nth-child(4):hover { color: #fff; background: var(--ink); }
.service-card:hover { transform: translateY(-8px); }
.service-card:hover::after { color: var(--ink); background: var(--silk); transform: rotate(0); }
.service-card h3 { margin-top: clamp(7rem, 11vw, 10rem); }

.results { isolation: isolate; overflow: clip; min-height: 100svh; }
.results-heading { position: sticky; top: 8rem; }
.stats-grid { position: relative; z-index: 2; gap: .7rem; }
.wire-orb {
  position: absolute;
  z-index: 1;
  bottom: 4%;
  left: 6%;
  width: clamp(9rem, 17vw, 16rem);
  aspect-ratio: 1;
  opacity: .3;
  transform-style: preserve-3d;
  animation: orb-turn 17s ease-in-out infinite alternate;
}
.wire-orb i { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; }
.wire-orb i:nth-child(2) { transform: rotateX(64deg); }
.wire-orb i:nth-child(3) { transform: rotateY(64deg); }
@keyframes orb-turn { to { transform: rotateX(32deg) rotateY(45deg) rotateZ(18deg); } }
.stat {
  position: relative;
  overflow: hidden;
  min-height: 18rem;
  border: 1px solid rgba(255,255,255,.2) !important;
  border-radius: .9rem;
  background:
    radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(255,255,255,.13), transparent 32%),
    rgba(255,255,255,.025);
  transition: transform .45s var(--ease), border-color .35s ease, background .35s ease;
}
.stat::after {
  content: "";
  position: absolute;
  right: -3rem;
  bottom: -4rem;
  width: 9rem;
  height: 9rem;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
  transition: transform .65s var(--ease), background .35s ease;
}
.stat:hover { z-index: 2; border-color: rgba(255,255,255,.52) !important; transform: translateY(-8px) scale(1.018); }
.stat:hover::after { background: var(--blue); transform: scale(1.45); }
.stat:nth-child(3n+1) strong { color: var(--red); }
.stat:nth-child(3n+2) strong { color: var(--blue); }
.stat:nth-child(3n+3) strong { color: var(--yellow); }
.stat strong { position: relative; z-index: 1; }
.stat span { position: relative; z-index: 1; font-size: .9rem; }

.clients { isolation: isolate; overflow: hidden; }
.logo-grid {
  position: relative;
  z-index: 2;
  gap: .75rem;
  border: 0;
  transform: rotate(-.35deg) scale(1.01);
}
.logo-cell {
  min-height: clamp(10rem, 16vw, 14rem);
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 15px 40px rgba(19,19,21,.05);
  transition: transform .5s var(--ease), background .3s ease, box-shadow .4s ease;
}
.logo-cell:nth-child(3n+1) { transform: translateY(1.2rem); }
.logo-cell:nth-child(3n+2) { transform: translateY(-1rem); }
.logo-cell:hover {
  z-index: 3;
  border-color: rgba(49,127,236,.48);
  background: var(--silk);
  box-shadow: 0 24px 50px rgba(19,19,21,.11);
  transform: translateY(-.45rem) rotate(.4deg) scale(1.035);
}
.logo-cell img { max-width: 72%; }

.work { isolation: isolate; overflow: hidden; background: #e9e8e2; }
.work::before { background: #e9e8e2; }
.work .ambient-type { top: 11rem; right: 0; }
.project-grid { position: relative; z-index: 2; gap: clamp(.8rem, 1.35vw, 1.35rem); }
.project-card {
  overflow: visible;
  border-radius: .9rem;
  box-shadow: 0 22px 60px rgba(19,19,21,.14);
  transform: perspective(900px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg)) translateY(var(--lift, 0));
  transform-style: preserve-3d;
  transition: transform .45s var(--ease), opacity .35s ease, filter .35s ease;
  will-change: transform;
}
.project-card::before {
  content: attr(data-project);
  position: absolute;
  z-index: 5;
  top: -1rem;
  left: -1rem;
  display: grid;
  place-items: center;
  width: 3.1rem;
  height: 3.1rem;
  border: 1px solid var(--ink);
  border-radius: 50%;
  color: var(--ink);
  background: rgba(255,255,255,.94);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  box-shadow: 0 10px 28px rgba(19,19,21,.14);
  backdrop-filter: blur(10px);
  transition: transform .45s var(--ease), color .3s ease, background .3s ease;
}
.project-card img,
.project-card::after { border-radius: inherit; }
.project-card:hover { --lift: -14px; z-index: 5; }
.project-card:hover::before { color: #fff; background: var(--ink); transform: rotate(-5deg) scale(1.06); }
.project-grid:has(.project-card:hover) .project-card:not(:hover) { opacity: .72; filter: grayscale(.35); }
.project-meta { transform: translateZ(40px); }
.play-button { transform: translateZ(50px); }
.project-card:hover .play-button { transform: translateZ(50px) scale(1.12); }

.process { isolation: isolate; }
.process-list li {
  position: relative;
  overflow: hidden;
  transition: width .6s var(--ease), padding .6s var(--ease), background .4s ease, color .4s ease;
}
.process-list li::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: .35rem;
  background: var(--blue);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .5s var(--ease);
}
.process-list li:nth-child(3n+1)::before { background: var(--red); }
.process-list li:nth-child(3n+3)::before { background: var(--yellow); }
.process-list li:hover {
  width: calc(100% - clamp(0rem, 4vw, 4rem));
  padding-right: clamp(1rem, 3vw, 3rem);
  padding-left: clamp(1rem, 3vw, 3rem);
  color: #fff;
  background: var(--ink);
}
.process-list li:hover::before { transform: scaleY(1); }
.process-list li:hover > span,
.process-list li:hover p { color: rgba(255,255,255,.62); }
.process-list h3 { transition: transform .5s var(--ease); }
.process-list li:hover h3 { transform: translateX(.35rem); }

.faq { background: var(--soft-blue); }
.faq::before { background: var(--soft-blue); }
.faq-list details { border-color: rgba(19,19,21,.28); }
.faq-list summary { transition: padding .45s var(--ease), color .3s ease; }
.faq-list summary:hover { padding-left: 1rem; color: var(--blue); }
.faq-list details[open] summary span { background: var(--blue); }

.contact { isolation: isolate; min-height: 100svh; }
.contact .ambient-type {
  z-index: 0;
  top: 18%;
  right: 0;
  color: transparent;
  opacity: .14;
  -webkit-text-stroke: 2px #fff;
}
.contact-inner { position: relative; z-index: 2; }
.contact-actions a { position: relative; overflow: hidden; }
.contact-actions a::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--blue);
  transform: translateX(-102%);
  transition: transform .65s var(--ease);
}
.contact-actions a:nth-child(2)::before { background: var(--red); }
.contact-actions a:hover { padding-right: 1rem; padding-left: 1rem; color: #fff; }
.contact-actions a:hover::before { transform: translateX(0); }
.contact-actions a:hover small { color: rgba(255,255,255,.72); }

.contact-footer .footer-links { align-items: center; gap: 1rem; }
.contact-footer .social-links { display: flex; gap: .55rem; }
.social-icon {
  display: grid;
  place-items: center;
  width: 2.65rem;
  height: 2.65rem;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  color: rgba(255,255,255,.7);
  background: rgba(255,255,255,.035);
  transition: color .35s ease, background .35s ease, border-color .35s ease, transform .45s var(--ease);
}
.social-icon svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.social-icon:hover { color: var(--ink); border-color: #fff; background: #fff; transform: translateY(-4px) rotate(-4deg); }
.privacy-link { margin-left: .35rem; padding: .55rem .15rem; border-bottom: 1px solid rgba(255,255,255,.22); }

html.theme-transitioning body,
html.theme-transitioning .site-header,
html.theme-transitioning .hero-ticker,
html.theme-transitioning .service-card,
html.theme-transitioning .results,
html.theme-transitioning .logo-cell,
html.theme-transitioning .work,
html.theme-transitioning .work::before,
html.theme-transitioning .process,
html.theme-transitioning .faq,
html.theme-transitioning .faq::before,
html.theme-transitioning .contact {
  transition: color .72s var(--ease), background-color .72s var(--ease), border-color .72s ease !important;
}

html[data-theme="noir"] body {
  color: #f2f1ec;
  background:
    radial-gradient(circle at 84% 8%, rgba(49,127,236,.14), transparent 24rem),
    radial-gradient(circle at 12% 2%, rgba(251,97,64,.08), transparent 22rem),
    #0d0f13;
}
html[data-theme="noir"] body::before { opacity: .025; mix-blend-mode: screen; }
html[data-theme="noir"] .site-header { border-color: rgba(255,255,255,.14); background: rgba(14,16,20,.78); box-shadow: 0 18px 55px rgba(0,0,0,.28); }
html[data-theme="noir"] .site-header.scrolled { background: rgba(14,16,20,.94); }
html[data-theme="noir"] .site-nav { color: rgba(255,255,255,.78); }
html[data-theme="noir"] .site-nav a:not(.nav-cta):hover { color: #fff; }
html[data-theme="noir"] .theme-switcher { border-color: rgba(255,255,255,.17); background: rgba(255,255,255,.06); }
html[data-theme="noir"] .theme-switcher button { color: rgba(255,255,255,.58); }
html[data-theme="noir"] .theme-switcher button:hover { color: #fff; }
html[data-theme="noir"] .theme-switcher button[aria-pressed="true"] { color: var(--ink); background: #f2f1ec; }
html[data-theme="noir"] .nav-cta { color: var(--ink); background: #f2f1ec; }
html[data-theme="noir"] .creative-thread { mix-blend-mode: normal; }
html[data-theme="noir"] .thread-track { stroke: rgba(255,255,255,.11); }
html[data-theme="noir"] .hero::before { border-color: rgba(255,255,255,.08); background: linear-gradient(45deg, transparent 49.8%, rgba(255,255,255,.07) 50%, transparent 50.2%), linear-gradient(-45deg, transparent 49.8%, rgba(255,255,255,.07) 50%, transparent 50.2%); }
html[data-theme="noir"] .hero::after,
html[data-theme="noir"] .eyebrow,
html[data-theme="noir"] .hero-intro,
html[data-theme="noir"] .about-body p,
html[data-theme="noir"] .split-heading > p,
html[data-theme="noir"] .work-heading > div:last-child > p,
html[data-theme="noir"] .process-list p,
html[data-theme="noir"] .faq-heading > p:not(.eyebrow) { color: rgba(255,255,255,.58); }
html[data-theme="noir"] .hero-intro { border-color: rgba(255,255,255,.72); }
html[data-theme="noir"] .button-dark { border: 1px solid rgba(255,255,255,.3); background: #161920; }
html[data-theme="noir"] .orbit-card { border-color: rgba(255,255,255,.24); background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 30px 90px rgba(0,0,0,.24); }
html[data-theme="noir"] .orbit-card::before,
html[data-theme="noir"] .orbit-card::after { border-color: rgba(255,255,255,.18); }
html[data-theme="noir"] .orbit-label { color: var(--ink); background: rgba(255,255,255,.94); }
html[data-theme="noir"] .glass-prism i { border-color: rgba(255,255,255,.24); background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(49,127,236,.08)); }
html[data-theme="noir"] .hero-ticker { border-color: rgba(255,255,255,.14); background: linear-gradient(90deg, rgba(17,19,24,.96), rgba(26,29,36,.96) 50%, rgba(20,27,39,.96)); }
html[data-theme="noir"] .hero-ticker span { color: rgba(255,255,255,.68); }
html[data-theme="noir"] .section-index { border-color: rgba(255,255,255,.15); color: rgba(255,255,255,.42); }
html[data-theme="noir"] .ambient-type-outline { -webkit-text-stroke-color: #fff; }
html[data-theme="noir"] .service-card { color: #f2f1ec; border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.035); box-shadow: 0 16px 50px rgba(0,0,0,.12); }
html[data-theme="noir"] .service-card p { color: rgba(255,255,255,.55); }
html[data-theme="noir"] .service-card:nth-child(1):hover { background: rgba(251,97,64,.12); }
html[data-theme="noir"] .service-card:nth-child(2):hover { background: rgba(49,127,236,.14); }
html[data-theme="noir"] .service-card:nth-child(3):hover { background: rgba(255,199,2,.1); }
html[data-theme="noir"] .service-card:nth-child(4):hover { background: rgba(255,255,255,.08); }
html[data-theme="noir"] .service-card:hover::after { color: #f2f1ec; background: rgba(255,255,255,.08); }
html[data-theme="noir"] .results,
html[data-theme="noir"] .results::before { background: #080a0e; }
html[data-theme="noir"] .logo-cell { border-color: rgba(255,255,255,.2); background: #f7f6f2; }
html[data-theme="noir"] .logo-cell:hover { border-color: rgba(49,127,236,.52); background: #fff; }
html[data-theme="noir"] .work,
html[data-theme="noir"] .work::before { background: #14171d; }
html[data-theme="noir"] .process-list li { border-color: rgba(255,255,255,.15); }
html[data-theme="noir"] .process-list li > span { color: rgba(255,255,255,.35); }
html[data-theme="noir"] .process-list li:hover { background: #f2f1ec; color: var(--ink); }
html[data-theme="noir"] .process-list li:hover p,
html[data-theme="noir"] .process-list li:hover > span { color: rgba(19,19,21,.62); }
html[data-theme="noir"] .faq,
html[data-theme="noir"] .faq::before { background: #10151d; }
html[data-theme="noir"] .faq-list details { border-color: rgba(255,255,255,.18); }
html[data-theme="noir"] .faq-list details p { color: rgba(255,255,255,.58); }
html[data-theme="noir"] .faq-list summary:hover { color: #8cb7f5; }
html[data-theme="noir"] .contact { background: #07090d; }
html[data-theme="noir"] .cursor-dot { background: #fff; }
html[data-theme="noir"] .cursor-ring { border-color: rgba(255,255,255,.62); }

.cursor {
  position: fixed;
  z-index: 1002;
  top: 0;
  left: 0;
  display: none;
  opacity: 0;
  pointer-events: none;
  will-change: transform;
}
.cursor-dot { width: .45rem; height: .45rem; border-radius: 50%; background: var(--ink); }
.cursor-ring {
  display: none;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid rgba(19,19,21,.62);
  border-radius: 50%;
  background: rgba(255,255,255,.09);
  backdrop-filter: invert(.04);
  transition: width .28s var(--ease), height .28s var(--ease), border-color .25s ease, background .25s ease;
}
.cursor-ring span { opacity: 0; font-size: .55rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; transition: opacity .2s ease; }
.cursor-ring.is-active { width: 4.5rem; height: 4.5rem; border-color: var(--blue); background: rgba(49,127,236,.16); }
.cursor-ring.is-view { width: 5rem; height: 5rem; color: #fff; border-color: var(--red); background: var(--red); }
.cursor-ring.is-view span { opacity: 1; }

.motion-ready [data-reveal] {
  clip-path: inset(0 0 18% 0);
  filter: blur(7px);
  transform: translateY(2.5rem) scale(.985);
  transition: opacity 1s var(--ease), transform 1s var(--ease), clip-path 1.1s var(--ease), filter .9s ease;
}
.motion-ready [data-reveal].is-visible { clip-path: none; filter: none; transform: translateY(0) scale(1); }

@media (hover: hover) and (pointer: fine) {
  body.cursor-ready,
  body.cursor-ready a,
  body.cursor-ready button,
  body.cursor-ready summary { cursor: none; }
  .cursor { display: block; }
  .cursor-ring { display: grid; }
  body.cursor-ready .video-dialog,
  body.cursor-ready .video-dialog * { cursor: auto; }
}

@media (max-width: 72rem) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(19rem, .62fr); }
  .hero-aside { min-height: 34rem; }
  .hero-frame-one { right: -1rem; }
  .hero-frame-two { left: -2rem; }
  .orbit-card { width: min(35vw, 24rem); }
  .logo-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 52rem) {
  body::before { opacity: .025; }
  .site-header { overflow: visible; }
  .site-header::after { overflow: hidden; border-radius: 999px; }
  .site-nav a:not(.nav-cta)::after { display: none; }
  .theme-switcher { justify-self: stretch; justify-content: center; margin: .35rem 0 .15rem; }
  html[data-theme="noir"] .site-nav { border-color: rgba(255,255,255,.15); background: rgba(14,16,20,.98); box-shadow: 0 25px 70px rgba(0,0,0,.35); }
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: 9rem;
    padding-bottom: 7rem;
  }
  .hero::before { top: 28%; right: -48%; width: 105vw; }
  .hero::after { top: 8rem; right: .65rem; }
  .hero h1 { font-size: clamp(4.5rem, 18vw, 8.5rem); }
  .hero-aside { min-height: clamp(25rem, 73vw, 33rem); }
  .hero-reel { display: block; }
  .hero-frame { width: clamp(7rem, 25vw, 10rem); }
  .hero-frame-one { top: 1%; right: 5%; }
  .hero-frame-two { bottom: 0; left: 2%; }
  .hero-frame-three { right: 0; bottom: 4%; width: clamp(5.5rem, 19vw, 7rem); }
  .glass-prism { --prism-depth: 1.75rem; top: 15%; left: 14%; width: 3.5rem; height: 3.5rem; }
  .orbit-card {
    overflow: visible;
    width: min(67vw, 26rem);
    min-height: 0;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(255,255,255,.38);
    animation: orbit-float 8s ease-in-out infinite;
  }
  .orbit-card::before,
  .orbit-card::after { top: auto; right: auto; bottom: auto; left: auto; width: auto; height: auto; transform: none; }
  .orbit-card::before { inset: 12%; }
  .orbit-card::after { inset: 27%; }
  .orbit-core { top: 29%; right: 29%; bottom: 29%; left: 29%; width: auto; height: auto; transform: none; }
  .orbit-label-one { top: 4%; left: 42%; }
  .orbit-label-two { top: 44%; right: -8%; left: auto; }
  .orbit-label-three { right: auto; bottom: 3%; left: 42%; }
  .orbit-label-four { top: 44%; bottom: auto; left: -5%; }
  .hero-note { position: absolute; right: 0; bottom: 0; }
  .hero-note br { display: initial; }
  .hero-ticker span { padding: .65rem 1rem; }
  .ambient-type { top: 3rem; }
  .about-heading h2 em { transform: none; }
  .results-heading { position: static; }
  .service-card { min-height: 20rem; }
  .logo-grid { transform: rotate(-.5deg); }
  .logo-cell:nth-child(n) { transform: none; }
  .project-card { transform: none; }
  .project-grid:has(.project-card:hover) .project-card:not(:hover) { opacity: 1; filter: none; }
}

@media (max-width: 38rem) {
  .hero { row-gap: 1.5rem; padding-top: 8rem; }
  .hero h1 { font-size: clamp(4.05rem, 18.5vw, 6rem); line-height: .72; }
  .hero-word:nth-child(2) { margin-left: 7vw; }
  .hero-word:nth-child(3) { margin-left: 14vw; }
  .hero-intro { margin-top: 2.6rem; }
  .hero-aside { min-height: 22rem; }
  .orbit-card { width: min(65vw, 17.5rem); min-height: 0; }
  .orbit-core { width: auto; height: auto; }
  .orbit-label { padding: .35rem .55rem; font-size: .56rem; }
  .orbit-label-one { top: 1%; left: 38%; }
  .orbit-label-two { top: 44%; right: -10%; }
  .orbit-label-three { bottom: 1%; left: 38%; }
  .orbit-label-four { top: 44%; left: -2%; }
  .hero-frame-one { right: 0; }
  .hero-frame-two { left: -1rem; }
  .hero-frame-three { right: -1rem; }
  .hero-note { font-size: .7rem; }
  .service-grid { gap: .65rem; }
  .service-card { min-height: 17rem; }
  .service-card h3 { margin-top: 5.5rem; }
  .stats-grid { gap: .5rem; }
  .stat { min-height: 13rem; border-radius: .65rem; }
  .logo-grid { gap: .45rem; }
  .logo-cell { min-height: 7.7rem; border-radius: 4rem; padding: 1.2rem; }
  .project-card::before { top: -.6rem; left: -.45rem; width: 2.35rem; height: 2.35rem; }
  .process-list li:hover { width: 100%; padding-right: .7rem; padding-left: .7rem; }
  .contact .ambient-type { top: 26%; }
  .contact-footer .footer-links { width: 100%; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  .has-loaded .hero-word,
  .hero-frame,
  .orbit-card,
  .orbit-card::before,
  .orbit-card::after,
  .hero-ticker div { animation: none !important; }
  .hero-reel,
  .glass-prism,
  .wire-orb,
  .project-card,
  .service-card { transform: none !important; }
  .cursor { display: none !important; }
  body,
  body a,
  body button,
  body summary { cursor: auto !important; }
  .motion-ready [data-reveal] { clip-path: none; filter: none; }
}

@media print {
  .hero-reel,
  .hero-ticker,
  .ambient-type,
  .cursor,
  body::before { display: none !important; }
}