/* Public site only. The shared --mercury token stays in style.css. */

.msNoScript {
  position: fixed;
  right: 16px;
  bottom: 16px;
  left: 16px;
  z-index: 100;
  margin: 0;
  padding: 12px 16px;
  background: #f0eee9;
  color: #141516;
  text-align: center;
}

.msNoScript a {
  color: inherit;
}

.mercuriiSite {
  --msBg: #141516;
  --msSurface: #1c1d1e;
  --msText: #f0eee9;
  --msMuted: #a5a5a1;
  --msLine: #353637;
  width: 100%;
  height: 100%;
  overflow: auto;
  overflow-x: clip;
  background: var(--msBg);
  color: var(--msText);
  color-scheme: dark;
  font: 400 16px/1.6 Outfit, sans-serif;
  text-align: left;
  scroll-behavior: smooth;
  scrollbar-color: var(--mercury) var(--msBg);
}

.mercuriiSite *,
.msProjectDialog * {
  box-sizing: border-box;
}

.mercuriiSite :is(h1, h2, h3, p) {
  margin: 0;
  padding: 0;
}

.mercuriiSite :is(button, input, textarea) {
  font: inherit;
}

.mercuriiSite button {
  cursor: pointer;
}

.mercuriiSite button:disabled {
  cursor: wait;
  opacity: 0.65;
}

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

.mercuriiSite :is(a, button, input, textarea, summary):focus-visible,
.msProjectDialog button:focus-visible {
  outline: 2px solid var(--mercury);
  outline-offset: 5px;
}

.mercuriiSite ::selection {
  background: var(--mercury);
  color: #141516;
}

.mercuriiSite section {
  scroll-margin-top: 100px;
}

.mercuriiSite svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.msContainer {
  width: min(1240px, calc(100% - 104px));
  margin-inline: auto;
}

.msEyebrow {
  display: block;
  font: 500 10px/1.6 'Jost', sans-serif;
  letter-spacing: 1.8px;
}

.msHeader {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #141516f5;
  border-bottom: 1px solid var(--msLine);
  backdrop-filter: blur(16px);
}

.msHeaderInner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 96px;
  gap: 30px;
}

.msBrand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.msLogo {
  display: block;
  width: 43px;
  height: 43px;
  background: var(--mercury);
  mask: url('/images/logo.svg') center / contain no-repeat;
}

.msBrand > span:last-child {
  font-size: 30px;
  line-height: 1;
  font-weight: 450;
  letter-spacing: -1px;
  margin: -6px;
}

.msBrandCaption {
  display: block;
  font: 500 8px/1 Jost, sans-serif;
  letter-spacing: 3.4px;
  margin-left: 1.1px;
  color: var(--msMuted);
}

.msDesktopNav {
  display: flex;
  gap: 34px;
  margin-left: auto;
  margin-right: 45px;
}

.msDesktopNav a {
  font-size: 14px;
  color: #bcbcb7;
  transition: color 0.2s;
}

.msDesktopNav a:hover,
.msTextLink:hover {
  color: var(--mercury);
}

.msHeaderCta {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 14px;
}

.msHeaderCta svg {
  width: 19px;
  color: var(--mercury);
}

.msMenuButton,
.msMobileNav {
  display: none;
}

.msSkipLink {
  position: absolute;
  top: -100px;
  left: 20px;
  z-index: 100;
  padding: 14px 24px;
  background: var(--mercury);
  color: #141516 !important;
}

.msSkipLink:focus {
  top: 10px;
}

.msHero {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: center;
  gap: 60px;
  padding-block: 104px 95px;
  min-height: 710px;
}

.msHeroCopy {
  position: relative;
  z-index: 1;
}

.msHero .msEyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #c0bcb5;
  font-size: 9px;
  letter-spacing: 1.5px;
}

.msStatusDot {
  width: 6px;
  height: 6px;
  background: var(--mercury);
  border-radius: 50%;
  box-shadow: 0 0 0 4px #e16b5710;
  flex-shrink: 0;
}

.mercuriiSite h1 {
  font-size: clamp(64px, 6.8vw, 98px);
  letter-spacing: -5.5px;
  line-height: 1.04;
  font-weight: 550;
  margin: 28px 0;
}

.mercuriiSite h1 span {
  color: var(--mercury);
}

.msHeroDescription {
  color: #b4b4af;
  font-size: 17px;
  max-width: 430px;
  line-height: 1.8;
}

.msHeroActions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
  margin-top: 34px;
}

.msButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  border: 1px solid transparent;
  padding: 16px 22px;
  font-weight: 500;
  font-size: 14px;
  transition: background 0.2s, transform 0.2s;
}

.mercuriiSite .msButtonCoral {
  background: var(--mercury);
  color: #181514;
}

.msButtonCoral:hover {
  background: #ed806d;
  transform: translateY(-2px);
}

.msButton svg {
  width: 18px;
  height: 18px;
}

.msTextLink {
  display: inline-flex;
  gap: 16px;
  align-items: center;
  font-size: 14px;
  transition: color 0.2s;
}

.msTextLink svg {
  width: 18px;
  height: 18px;
}

.mercuriiSite .msHeroNote {
  margin-top: 25px;
  color: #aaa7a0;
  font-size: 11px;
  letter-spacing: 0.2px;
}

.msHeroVisual {
  position: relative;
  padding-top: 70px;
  min-width: 0;
}

.msOrbit {
  position: absolute;
  width: 335px;
  height: 335px;
  right: -25px;
  top: -35px;
  border: 1px solid #e16b5740;
  border-radius: 50%;
}

.msOrbit:before {
  content: '';
  position: absolute;
  inset: 22px;
  border-radius: 50%;
}

.msOrbit > div {
  position: absolute;
  inset: 58px;
  background: var(--mercury);
  border-radius: 50%;
}

.msOrbit > span {
  position: absolute;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: var(--mercury);
  right: 25px;
  top: 22px;
}

.msOrbit > i {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d3bdb5;
  left: 20px;
  bottom: 70px;
}

.msTerminal {
  position: relative;
  border: 1px solid #55504a;
  background: #1d1e1f;
  box-shadow: 15px 18px 0 #141516, 16px 19px 0 #3a3632;
  transform: rotate(-2deg);
}

.msTerminalBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid #3b3b3a;
  color: #9c9b97;
  font: 10px/1.5 monospace;
}

.msTerminalDots {
  display: flex;
  gap: 5px;
}

.msTerminalDots i {
  width: 6px;
  height: 6px;
  border: 1px solid #787570;
  border-radius: 50%;
}

.msTerminalDots i:first-child {
  background: var(--mercury);
  border-color: var(--mercury);
}

.msTerminalBody {
  padding: 25px 22px 30px;
  font: 11px/2.2 monospace;
}

.msCommand {
  color: #ddd8d1;
}

.msCommand > span {
  color: var(--mercury);
}

.mercuriiSite .msCodeComment {
  color: #9c9b94;
  margin: 21px 0 12px;
  font-size: 10px;
}

.msCodeLine {
  display: flex;
  gap: 16px;
  white-space: pre;
}

.msCodeLine > span {
  color: #83847f;
  font-size: 10px;
}

.msCodeLine code {
  font: inherit;
  color: #ddd8cf;
}

.msCodeLine b {
  color: var(--mercury);
  font-weight: 400;
}

.msCodeLine em {
  font-style: normal;
  color: #d9af86;
}

.msTerminalResult {
  display: flex;
  align-items: center;
  gap: 9px;
  border-top: 1px solid #363633;
  padding-top: 17px;
  margin-top: 22px;
  color: #d9d8cf;
  font-size: 10px;
}

.msTerminalResult > span:first-child {
  color: var(--mercury);
}

.msCursor {
  width: 6px;
  height: 12px;
  background: var(--mercury);
  animation: msBlink 1.2s steps(2, jump-none) 6;
}

.msTerminalFooter {
  display: flex;
  justify-content: space-between;
  padding: 10px 18px;
  border-top: 1px solid #3b3b3a;
  color: #a6a49e;
  font: 8px/1.5 monospace;
  letter-spacing: 0.8px;
}

.msTerminalFooter i {
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 5px;
  background: var(--mercury);
  border-radius: 50%;
}

.msVisualCaption {
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
  font: 8px/1.5 monospace;
  letter-spacing: 1px;
  color: #a4a09a;
}

.msCapabilityStrip {
  border-block: 1px solid var(--msLine);
  background: #1a1b1c;
}

.msCapabilityStrip > div {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-block: 25px;
}

.msCapabilityStrip span {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  color: #ccc9c2;
  font-size: 13px;
  white-space: nowrap;
}

.msCapabilityStrip i {
  color: var(--mercury);
  font-size: 20px;
  font-style: normal;
}

.msSection {
  padding-block: 105px;
}

.msSectionHeading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 60px;
  margin-bottom: 50px;
}

.msSectionHeading .msEyebrow,
.msAbout .msEyebrow,
.msFaq .msEyebrow {
  color: var(--mercury);
  margin-bottom: 20px;
}

.mercuriiSite h2 {
  font-size: clamp(34px, 3.6vw, 48px);
  font-weight: 450;
  letter-spacing: -1.8px;
  line-height: 1.15;
}

.msSectionHeading h2 span {
  color: #a09f98;
}

.msSectionHeading > p {
  color: var(--msMuted);
  font-size: 15px;
  max-width: 300px;
  line-height: 1.8;
}

.msService {
  display: grid;
  grid-template-columns: 40px 1fr 1.15fr 30px;
  gap: 24px;
  align-items: center;
  border-top: 1px solid var(--msLine);
  padding: 35px 5px;
  transition: background 0.2s;
}

.msService:last-child {
  border-bottom: 1px solid var(--msLine);
}

.msService:hover {
  background: #ffffff03;
}

.msServiceNumber {
  color: #a19d96;
  font: 10px monospace;
  align-self: start;
  margin-top: 8px;
}

.msServiceTitle {
  display: flex;
  gap: 23px;
  align-items: center;
}

.msServiceTitle svg {
  width: 30px;
  height: 30px;
  color: var(--mercury);
}

.msService h3 {
  font-size: 24px;
  line-height: 1.25;
  font-weight: 450;
  letter-spacing: -0.5px;
}

.msServiceDescription > p {
  font-size: 14px;
  line-height: 1.8;
  color: var(--msMuted);
  max-width: 410px;
}

.msServiceDescription > span {
  display: block;
  margin-top: 14px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  color: #bfb1a4;
}

.msService > svg {
  width: 22px;
  color: var(--mercury);
  transition: transform 0.2s;
}

.msService:hover > svg {
  transform: translate(3px, -3px);
}

.msWorkSection {
  background: #1b1c1d;
  border-block: 1px solid var(--msLine);
  padding-block: 95px;
}

.msWorkSection .msSectionHeading {
  margin-bottom: 30px;
}

.msCarouselControls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
}

.msCarouselHint {
  color: var(--msMuted);
  font-size: 12px;
}

.msCarouselNavigation {
  display: flex;
  align-items: center;
  gap: 10px;
}

.msCarouselCount {
  font: 11px/1.5 monospace;
  letter-spacing: 1px;
  margin-right: 12px;
  white-space: nowrap;
}

.msCarouselCount > span:not(.msVisuallyHidden) {
  color: var(--msMuted);
}

.msCarouselNavigation button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid #4c4b46;
  background: transparent;
  color: var(--mercury);
  border-radius: 50%;
  transition: background 0.2s, color 0.2s;
}

.msCarouselNavigation button:hover {
  color: #181514;
  background: var(--mercury);
  border-color: var(--mercury);
}

.msCarouselNavigation svg {
  width: 20px;
  height: 20px;
}

.msCarouselPrevious svg {
  transform: rotate(180deg);
}

.msCarouselTrack {
  display: flex;
  gap: 30px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 6px;
  margin: -6px;
}

.msCarouselTrack::-webkit-scrollbar {
  display: none;
}

.msCarouselTrack:focus-visible {
  outline: 2px solid var(--mercury);
  outline-offset: 5px;
}

.msCarouselSlide {
  flex: 0 0 calc((100% - 30px) / 2);
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.msCarouselSlide .msProject {
  display: block;
  width: 100%;
}

.msVisuallyHidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.msProject {
  padding: 0;
  border: 0;
  background: none;
  color: var(--msText);
  text-align: left;
  min-width: 0;
}

.msProjectImage {
  padding: 34px 32px 0;
  background: #343530;
  overflow: hidden;
  position: relative;
  border: 1px solid #ffffff09;
}

.msProjectImage-savor {
  background: #382d27;
}

.msProjectImage-communitii {
  background: #283637;
}

.msProjectImage-stokk {
  background: #2d303a;
}

.msProjectImage-neighborly {
  background: #303529;
}

.msProjectImage-puzzl {
  background: #372b36;
}

.msBrowserBar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #212321;
  border: 1px solid #ffffff20;
  border-bottom: none;
  padding: 9px 12px;
  font: 8px/1.5 monospace;
  color: #a1a39c;
  border-radius: 5px 5px 0 0;
}

.msBrowserBar > span:first-child {
  font-size: 7px;
  letter-spacing: 2px;
  color: #71746d;
}

.msProjectImage img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  object-position: top;
  transition: transform 0.35s;
  transform-origin: bottom;
}

.msProject:hover .msProjectImage img {
  transform: scale(1.025);
}

.msProjectOpen {
  display: flex;
  position: absolute;
  bottom: 18px;
  right: 18px;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: #151616f5;
  color: var(--msText);
  font-size: 11px;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.2s, transform 0.2s;
}

.msProject:hover .msProjectOpen,
.msProject:focus-visible .msProjectOpen {
  opacity: 1;
  transform: none;
}

.msProjectOpen svg {
  width: 16px;
  height: 16px;
}

.msProjectInfo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
}

.msProjectInfo .msEyebrow {
  color: #b0aba1;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

.msProjectInfo h3 {
  font-size: 29px;
  font-weight: 400;
  letter-spacing: -0.6px;
  line-height: 1.5;
}

.msProjectInfo p {
  color: var(--msMuted);
  font-size: 13px;
}

.msProjectArrow {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid #4c4b46;
  border-radius: 50%;
  color: var(--mercury);
}

.msProjectArrow svg {
  width: 18px;
  height: 18px;
}

.msSteps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.msStepNumber {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--msLine);
  padding-bottom: 24px;
  color: var(--mercury);
}

.msStepNumber span {
  font: 14px monospace;
}

.msStepNumber svg {
  width: 20px;
  height: 20px;
  color: #87877f;
}

.msSteps article:last-child .msStepNumber svg {
  transform: rotate(-45deg);
}

.msSteps h3 {
  font-size: 23px;
  font-weight: 450;
  letter-spacing: -0.4px;
  margin: 24px 0 12px;
}

.msSteps p {
  color: var(--msMuted);
  font-size: 14px;
  line-height: 1.8;
}

.msAbout {
  background: #1b1c1d;
  border-block: 1px solid var(--msLine);
  padding-block: 90px;
}

.msAboutInner {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 120px;
  align-items: center;
}

.msAboutMark {
  display: flex;
  flex-direction: column;
  gap: 34px;
  align-items: center;
  justify-content: center;
  min-height: 340px;
  background-image: linear-gradient(#ffffff05 1px, transparent 1px), linear-gradient(90deg, #ffffff05 1px, transparent 1px);
  background-size: 32px 32px;
  border: 1px solid #ffffff0a;
}

.msAboutMark .msLogo {
  width: 190px;
  height: 190px;
}

.msAboutMark > span:last-child {
  font: 8px monospace;
  letter-spacing: 2.4px;
  color: #b1a59a;
}

.msAbout h2 {
  font-size: 42px;
  margin-bottom: 25px;
}

.msAbout h2 span {
  color: var(--mercury);
}

.msAbout p {
  color: var(--msMuted);
  font-size: 15px;
  line-height: 1.8;
  margin-block: 15px;
}

.msAbout .msTextLink {
  margin-top: 18px;
}

.msFaq {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 120px;
}

.msFaq .msEyebrow {
  max-width: 250px;
  font-size: 9px;
}

.msFaq > div > p {
  color: var(--msMuted);
  font-size: 14px;
  margin-top: 24px;
}

.msFaq a {
  display: inline-flex;
  gap: 14px;
  align-items: center;
  margin-top: 12px;
  color: var(--msText);
}

.msFaq a svg {
  width: 15px;
  height: 15px;
  color: var(--mercury);
}

.msFaq details {
  border-top: 1px solid var(--msLine);
}

.msFaq details:last-child {
  border-bottom: 1px solid var(--msLine);
}

.msFaq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  list-style: none;
  cursor: pointer;
  padding: 23px 0;
  font-size: 16px;
}

.msFaq summary::-webkit-details-marker {
  display: none;
}

.msFaq summary span {
  font-size: 25px;
  font-weight: 300;
  color: var(--mercury);
  transition: transform 0.2s;
}

.msFaq details[open] summary span {
  transform: rotate(45deg);
}

.msFaq details p {
  color: var(--msMuted);
  font-size: 14px;
  padding: 0 28px 24px 0;
  line-height: 1.8;
}

.msContact {
  background: var(--mercury);
  color: #221c19;
  padding-block: 90px;
}

.msContactInner {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  align-items: center;
  gap: 80px;
}

.msContact .msEyebrow {
  font-size: 9px;
  letter-spacing: 1.4px;
}

.msContact h2 {
  position: relative;
  width: fit-content;
  margin: 30px 0 24px;
  font-size: clamp(60px, 6.5vw, 86px);
  line-height: 1;
  letter-spacing: -4px;
  font-weight: 500;
}

.msContact h2 > span {
  color: #5f2921;
}

.msContact h2 > svg {
  position: absolute;
  right: -55px;
  top: 8px;
  width: 38px;
  height: 38px;
}

.msContactCopy p {
  font-size: 16px;
  line-height: 1.8;
}

.msContactEmail {
  display: inline-flex;
  align-items: center;
  gap: 35px;
  font-size: 21px;
  border-bottom: 1px solid #221c1970;
  padding-bottom: 6px;
  margin-top: 28px;
}

.msContactEmail svg {
  width: 20px;
  height: 20px;
}

.msContactForm {
  padding: 38px;
  background: var(--msBg);
  color: var(--msText);
  border: 1px solid #452b2450;
}

.msContactForm > .msEyebrow {
  margin-bottom: 28px;
  color: #b7b1a8;
  font-size: 8px;
}

.msFormRow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.msContactForm label {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 12px;
  color: #dedbd4;
  min-width: 0;
  margin-bottom: 24px;
}

.msContactForm :is(input, textarea) {
  width: 100%;
  border: 0;
  border-bottom: 1px solid #4d4b47;
  border-radius: 0;
  background: none;
  color: var(--msText);
  padding: 8px 0 12px;
  font-size: 12px;
  box-shadow: none;
  outline-offset: 4px;
}

.msContactForm textarea {
  resize: vertical;
  min-height: 105px;
}

.msContactForm :is(input, textarea)::placeholder {
  color: #9f9c95;
  opacity: 1;
}

.msFormBottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.msFormBottom > p {
  font-size: 10px;
  color: #b0aaa1;
}

.msFormBottom .msButton {
  padding: 13px 17px;
  font-size: 12px;
  gap: 18px;
}

.msFormStatus {
  font-size: 13px;
  line-height: 1.6;
}

.msFormStatus:not(:empty) {
  border-top: 1px solid var(--msLine);
  padding-top: 20px;
  margin-top: 20px;
}

.msFormStatus a {
  text-decoration: underline;
  color: var(--mercury);
}

.msFooter {
  padding-block: 45px 22px;
}

.msFooterTop,
.msFooterBottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
}

.msFooterTop > span {
  font-size: 13px;
  color: var(--msMuted);
}

.msFooterTop > a:last-child {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
}

.msFooterTop > a:last-child svg {
  width: 15px;
  height: 15px;
  color: var(--mercury);
}

.msFooterBottom {
  border-top: 1px solid var(--msLine);
  margin-top: 38px;
  padding-top: 20px;
  font-size: 10px;
  color: #a7a39b;
}

.msProjectDialog {
  border: 1px solid #55524b;
  padding: 0;
  width: min(1100px, calc(100vw - 40px));
  max-height: calc(100dvh - 40px);
  overflow: auto;
  background: #1b1c1d;
  color: #f0eee9;
  font: 400 16px/1.6 Outfit, sans-serif;
}

.msProjectDialog::backdrop {
  background: #050505dc;
  backdrop-filter: blur(8px);
}

.msDialogInner > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 28px;
}

.msDialogInner .msEyebrow {
  color: var(--mercury);
  font-size: 9px;
  text-transform: uppercase;
}

.msDialogInner h2 {
  font-weight: 400;
  font-size: 32px;
  margin: 0;
  padding: 0;
}

.msDialogInner button {
  color: #f0eee9;
  border: 1px solid #55524b;
  background: none;
  width: 44px;
  height: 44px;
  font-size: 28px;
  cursor: pointer;
}

.msDialogInner > img {
  display: block;
  width: 100%;
  height: auto;
}

.msDialogInner > p {
  font-size: 15px;
  padding: 24px 28px;
  margin: 0;
  color: #bfbab1;
}

@keyframes msBlink {
  to {
    opacity: 0;
  }
}

@media (min-width: 1600px) {
  .msHero {
    min-height: 760px;
  }
}

@media (max-width: 1100px) {
  .msContainer {
    width: calc(100% - 64px);
  }

  .msHero {
    gap: 34px;
    padding-block: 90px;
    min-height: 660px;
  }

  .mercuriiSite h1 {
    font-size: 75px;
    letter-spacing: -4px;
  }

  .msHeroActions {
    gap: 20px;
  }

  .msHeroActions .msButton {
    padding-inline: 18px;
  }

  .msHeroDescription {
    font-size: 16px;
  }

  .msTerminalBody {
    font-size: 9px;
    padding-inline: 15px;
  }

  .msCodeLine {
    gap: 12px;
  }

  .msCodeComment {
    font-size: 9px !important;
  }

  .msOrbit {
    width: 280px;
    height: 280px;
  }

  .msDesktopNav {
    margin-right: 15px;
    gap: 22px;
  }

  .msService {
    grid-template-columns: 25px 1fr 1fr 20px;
    gap: 18px;
  }

  .msServiceTitle {
    gap: 16px;
  }

  .msService h3 {
    font-size: 21px;
  }

  .msAboutInner,
  .msFaq {
    gap: 65px;
  }

  .msContactInner {
    gap: 45px;
  }

  .msContactForm {
    padding: 28px;
  }

  .msContact h2 {
    font-size: 65px;
  }

  .msFormBottom {
    flex-wrap: wrap;
  }
}

@media (max-width: 800px) {
  .msContainer {
    width: calc(100% - 40px);
  }

  .msHeaderInner {
    height: 78px;
    gap: 22px;
  }

  .msBrand > span:last-child {
    font-size: 27px;
  }

  .msLogo {
    width: 37px;
    height: 37px;
  }

  .msDesktopNav {
    display: none;
  }

  .msHeaderCta {
    margin-left: auto;
    font-size: 12px;
    gap: 12px;
  }

  .msMenuButton {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 40px;
    height: 40px;
    border: 1px solid #484844;
    background: none;
    padding: 10px;
  }

  .msMenuButton span {
    height: 1px;
    width: 18px;
    background: #e5e1da;
    transition: transform 0.2s;
  }

  .msMenuButton[aria-expanded='true'] span:first-child {
    transform: translateY(3.5px) rotate(45deg);
  }

  .msMenuButton[aria-expanded='true'] span:last-child {
    transform: translateY(-3.5px) rotate(-45deg);
  }

  .msMobileNav {
    display: block;
    padding: 8px 24px 24px;
    border-top: 1px solid var(--msLine);
    background: var(--msBg);
    position: absolute;
    width: 100%;
    box-shadow: 0 20px 25px #0007;
  }

  .msMobileNav a {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 15px 0;
    border-bottom: 1px solid var(--msLine);
    font-size: 22px;
  }

  .msMobileNav a > span {
    font: 10px monospace;
    color: var(--mercury);
  }

  .msMobileNav a > svg {
    margin-left: auto;
    color: var(--mercury);
    width: 18px;
  }

  .msHero {
    grid-template-columns: 1fr;
    gap: 75px;
    padding-block: 65px 55px;
  }

  .mercuriiSite h1 {
    font-size: clamp(65px, 11vw, 86px);
    margin-block: 26px;
  }

  .msHeroDescription {
    max-width: 490px;
  }

  .msHeroVisual {
    width: min(100% - 20px, 500px);
    justify-self: center;
    padding-top: 35px;
  }

  .msOrbit {
    top: -38px;
    right: -15px;
    width: 260px;
    height: 260px;
  }

  .msTerminalBody {
    font-size: 11px;
    padding-inline: 22px;
  }

  .msVisualCaption {
    margin-top: 32px;
  }

  .msCapabilityStrip > div {
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 25px;
    row-gap: 12px;
    padding-block: 20px;
  }

  .msCapabilityStrip span {
    gap: 12px;
    font-size: 11px;
  }

  .msCapabilityStrip i {
    font-size: 14px;
  }

  .msSection {
    padding-block: 70px;
  }

  .msSectionHeading {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 32px;
  }

  .msSectionHeading > p {
    max-width: 450px;
  }

  .mercuriiSite h2 {
    font-size: 38px;
  }

  .msService {
    grid-template-columns: 24px 1fr 24px;
    padding-block: 28px;
    gap: 15px;
  }

  .msServiceDescription {
    grid-column: 2;
    grid-row: 2;
  }

  .msService > svg {
    grid-column: 3;
    grid-row: 1;
  }

  .msServiceTitle svg {
    width: 25px;
    height: 25px;
  }

  .msServiceTitle {
    gap: 14px;
  }

  .msService h3 {
    font-size: 24px;
  }

  .msServiceDescription > span {
    font-size: 8px;
  }

  .msWorkSection {
    padding-block: 65px;
  }

  .msCarouselTrack {
    gap: 20px;
  }

  .msCarouselSlide {
    flex-basis: calc((100% - 20px) / 2);
  }

  .msProjectImage {
    padding: 20px 16px 0;
  }

  .msBrowserBar {
    font-size: 6px;
    padding: 7px;
  }

  .msBrowserBar > span:first-child {
    font-size: 5px;
    letter-spacing: 0;
  }

  .msProjectInfo h3 {
    font-size: 26px;
  }

  .msProjectInfo p {
    font-size: 11px;
  }

  .msProjectArrow {
    width: 32px;
    height: 32px;
  }

  .msSteps {
    grid-template-columns: 1fr 1fr;
    gap: 35px;
  }

  .msAbout {
    padding-block: 65px;
  }

  .msAboutInner {
    grid-template-columns: 0.7fr 1fr;
    gap: 35px;
  }

  .msAboutMark {
    min-height: 260px;
  }

  .msAboutMark .msLogo {
    width: 135px;
    height: 135px;
  }

  .msAboutMark > span:last-child {
    font-size: 6px;
  }

  .msAbout h2 {
    font-size: 32px;
  }

  .msFaq {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .msContact {
    padding-block: 65px;
  }

  .msContactInner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .msContact h2 {
    font-size: 72px;
  }

  .msContactForm {
    padding: 32px;
  }

  .msFooterTop {
    flex-wrap: wrap;
  }

  .msFooterTop > span {
    display: none;
  }

  .msFooterBottom {
    flex-wrap: wrap;
    font-size: 9px;
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .msContainer {
    width: calc(100% - 40px);
  }

  .msHeaderCta {
    font-size: 11px;
    gap: 8px;
  }

  .msHeaderCta svg {
    width: 14px;
  }

  .msHeaderInner {
    gap: 12px;
  }

  .msBrand {
    gap: 9px;
  }

  .msBrand > span:last-child {
    font-size: 25px;
  }

  .msBrandCaption {
    font-size: 7px;
    letter-spacing: 2.8px;
  }

  .msLogo {
    width: 32px;
    height: 32px;
  }

  .msHero .msEyebrow {
    font-size: 7px;
    letter-spacing: 1px;
    gap: 8px;
  }

  .msHero {
    padding-top: 45px;
    gap: 70px;
  }

  .mercuriiSite h1 {
    font-size: clamp(53px, 15.7vw, 74px);
    letter-spacing: -3px;
  }

  .msHeroDescription {
    font-size: 15px;
  }

  .msHeroActions {
    gap: 23px;
    margin-top: 28px;
  }

  .msHeroActions .msButton {
    padding: 15px 18px;
    font-size: 13px;
    gap: 22px;
  }

  .msHeroActions .msTextLink {
    font-size: 13px;
  }

  .msHeroNote {
    font-size: 10px !important;
  }

  .msTerminalBody {
    font-size: 8px;
    padding: 20px 12px 24px;
  }

  .msCodeLine {
    gap: 10px;
  }

  .msCodeLine > span {
    font-size: 8px;
  }

  .msTerminalBar {
    font-size: 8px;
    padding: 11px;
  }

  .msCodeComment {
    font-size: 7px !important;
  }

  .msTerminalResult {
    font-size: 8px;
    gap: 6px;
  }

  .msTerminalFooter {
    font-size: 6px;
    padding: 10px;
  }

  .msVisualCaption {
    font-size: 6px;
    letter-spacing: 0.7px;
  }

  .msOrbit {
    width: 230px;
    height: 230px;
  }

  .msOrbit > div {
    inset: 42px;
  }

  .msOrbit > span {
    width: 32px;
    height: 32px;
    right: 17px;
  }

  .mercuriiSite h2 {
    font-size: 33px;
    letter-spacing: -1.3px;
  }

  .msSectionHeading .msEyebrow {
    font-size: 8px;
    margin-bottom: 16px;
  }

  .msSectionHeading > p {
    font-size: 14px;
  }

  .msServiceTitle {
    align-items: flex-start;
  }

  .msServiceTitle svg {
    width: 22px;
    height: 22px;
  }

  .msService h3 {
    font-size: 21px;
  }

  .msServiceDescription > p {
    font-size: 13px;
  }

  .msServiceDescription > span {
    font-size: 7px;
    letter-spacing: 0.6px;
  }

  .msCarouselSlide {
    flex-basis: 100%;
  }

  .msCarouselHint {
    font-size: 10px;
  }

  .msCarouselCount {
    margin-right: 4px;
    font-size: 10px;
  }

  .msCarouselNavigation {
    gap: 8px;
  }

  .msProjectImage {
    padding: 27px 23px 0;
  }

  .msBrowserBar {
    font-size: 7px;
  }

  .msProjectInfo {
    padding-top: 15px;
  }

  .msProjectInfo p {
    font-size: 12px;
  }

  .msProjectInfo h3 {
    font-size: 28px;
  }

  .msProjectArrow {
    width: 36px;
    height: 36px;
  }

  .msSteps {
    gap: 30px 24px;
  }

  .msSteps h3 {
    font-size: 20px;
  }

  .msSteps p {
    font-size: 13px;
  }

  .msStepNumber {
    padding-bottom: 18px;
  }

  .msAboutInner {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .msAboutMark {
    min-height: 260px;
  }

  .msAboutMark .msLogo {
    width: 150px;
    height: 150px;
  }

  .msAboutMark > span:last-child {
    font-size: 8px;
  }

  .msContact h2 {
    font-size: 66px;
    letter-spacing: -3px;
  }

  .msContact h2 > svg {
    right: 0;
    top: -34px;
    width: 28px;
    height: 28px;
  }

  .msContactCopy p {
    font-size: 15px;
  }

  .msContactForm {
    padding: 25px 22px;
  }

  .msFormRow {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .msFormBottom {
    align-items: flex-start;
    gap: 20px;
  }

  .msFormBottom .msButton {
    width: 100%;
    justify-content: space-between;
  }

  .msFooter {
    padding-block: 32px 20px;
  }

  .msFooterBottom > span:nth-child(2) {
    display: none;
  }

  .msDialogInner > header {
    padding: 16px;
  }

  .msDialogInner > p {
    padding: 18px;
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mercuriiSite {
    scroll-behavior: auto;
  }

  .mercuriiSite *,
  .mercuriiSite *:before {
    animation: none !important;
    transition: none !important;
  }
}

.mercuriiSite::-webkit-scrollbar {
  background: var(--msBg);
}

.mercuriiSite::-webkit-scrollbar-thumb {
  background: var(--mercury);
}